# 稀飯版 Day4
Date: 2024/10/04
### [CSScoke](https://youtu.be/aN7zFs_AT8s)
```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 & 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 & text</a> by Rogelio KG (<a href="https://codepen.io/Rogelio-KG">@Rogelio-KG</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
Sign in with Wallet
Connect another wallet