---
# System prepended metadata

title: 稀飯版 Day4
tags: [Layout, CSS, HTML]

---

# 稀飯版 Day4

Date: 2024/10/04

### [CSScoke](https://youtu.be/aN7zFs_AT8s)

![交錯漂浮版](https://i.imgur.com/3FfbCNW.png)

```html
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrap">
      <!-- item 1 -->
      <div class="item">
        <!-- picture left -->
        <div class="pic">
          <img src="https://picsum.photos/600/350/?random=10" alt="" />
        </div>
        <div class="txt">
          <h2>金魚都懂的切版</h2>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum, ut.
            Quod tempora, excepturi quibusdam tenetur voluptas molestias
            blanditiis recusandae nobis nesciunt quas omnis laboriosam. Quas
            veniam possimus vero esse non?
          </p>
        </div>
      </div>
      <!-- item 2 -->
      <div class="item">
        <div class="txt">
          <h2>我的記憶力只有三秒</h2>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic
            voluptas eum molestias dolor sed ut sunt, porro culpa fugiat minus
            pariatur nostrum, animi doloremque veniam dolores exercitationem a,
            nihil ratione!
          </p>
        </div>
        <!-- picture right -->
        <div class="pic">
          <img src="https://picsum.photos/600/350/?random=20" alt="" />
        </div>
      </div>
      <!-- item 3 -->
      <div class="item">
        <!-- picture left -->
        <div class="pic">
          <img src="https://picsum.photos/600/350/?random=30" alt="" />
        </div>
        <div class="txt">
          <h2>這裡打很重要的暴力班廣告</h2>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam
            perspiciatis, voluptate commodi consequuntur nobis illo praesentium
            dolorem velit quia sequi voluptatibus officia odio optio vel ipsum
            sint, dolor, eveniet est.
          </p>
        </div>
      </div>
      <!-- item 4 -->
      <div class="item">
        <div class="txt">
          <h2>這邊是敲碗區</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque
            saepe vel praesentium facere enim sunt, consequatur libero
            temporibus voluptatibus cum cupiditate unde laborum. Quia dicta
            animi asperiores, culpa quasi nemo?
          </p>
        </div>
        <!-- picture right -->
        <div class="pic">
          <img src="https://picsum.photos/600/350/?random=40" alt="" />
        </div>
      </div>
    </div>
  </body>
</html>
```

```css
/* style.css */

/******************** Main Starts ********************/
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Noto Sans TC", sans-serif;
}

body {
  padding: 100px 0; /* 上下寬一點 */
  background: linear-gradient(20deg, #00AFB9, #FED9B7) center center /
    100% 100%;
} 

.wrap {
  width: 1200px;
  margin: auto;
}

.item {
  display: flex;
  align-items: center;
  margin-bottom: 70px;
}

.item .pic {
  position: relative;
  width: 55%; /* 我們要設計成交錯，因此 55%+55% */
  flex-shrink: 0; /* 讓 flex 不要太聰明自己壓縮 */
}

.item .pic img {
  vertical-align: middle; /* 消除圖片底下小間隙 */
  border-radius: 25px; /* Rogelio: 我是圓角魔人 */
}

.item .txt {
  width: 55%; /* 我們要設計成交錯，因此 55%+55% */
  flex-shrink: 0; /* 讓 flex 不要太聰明自己壓縮 */
  padding: 50px 30px; /* 往外 padding 讓字不要和區塊邊黏在一起
  (副作用：區塊超出 item) */
  box-sizing: border-box; /* 為消除副作用，
  我們直接改變 box model，把寬高的定義上升到 border，
  這樣我們的區塊寬就一定是 55% */
  position: relative; /* why? */
  z-index: 1; /* 拉高文字區塊圖層 */
  backdrop-filter: blur(4px); /* RogelioKG: 自己加毛玻璃 */
  border-radius: 25px; /* Rogelio: 我是圓角魔人 */
}

.item .txt h2 {
  font-weight: 900;
  padding-bottom: 10px; /* RogelioKG: 自己加 padding */
}

.item .txt p {
  font-weight: 300;
}

/* 讓 item 左邊的 margin-right 都少 10% (110%-10%=100% 歐耶) */
.item > :first-child {
  margin-right: -10%;
}

/* 文字區塊色彩 */
.item:nth-child(1) .txt {
  background-color: rgb(255, 170, 136, 0.7);
}

.item:nth-child(2) .txt {
  background-color: rgb(42, 253, 208, 0.7);
}

.item:nth-child(3) .txt {
  background-color: rgb(254, 201, 121, 0.7);
}

.item:nth-child(4) .txt {
  background-color: rgb(240, 174, 193, 0.7);
}
/******************** Main Ends ********************/
```

### My Practices

+ overlapping image & text (再練習)
  + `.wrap` 容器定寬
  + `.item .pic` 和 `.item .txt`
    + `width` 各 55%
    + `flex-shrink` 設成 0 把版面弄壞
  + `.item > :first-child` 的 `margin-right` -10% (這樣右邊的東西就能督進來)
  + `.item .txt` 的 `z-index` 設為 1 (文字永遠在最上層)
  + 如果你的文字需要 padding，使用 border-box (確保比例 55% + 55% - 10% = 100%)

<iframe height="300" style="width: 100%;" scrolling="no" title="overlapping images &amp; text" src="https://codepen.io/Rogelio-KG/embed/preview/NWQrajG?default-tab=html%2Cresult&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/Rogelio-KG/pen/NWQrajG">
  overlapping images &amp; text</a> by Rogelio KG (<a href="https://codepen.io/Rogelio-KG">@Rogelio-KG</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>