嗨嗨～歡迎來到「30天前端設計之旅」的DAY 22！今天將探討如何利用 CSS 和 HTML 來進行更具創意的圖片設計。透過為照片添加錯位的背景色、使用斜線背景裝飾、改變照片形狀，甚至透過文字形狀來裁切照片，這些技巧將讓你設計的網站更加生動有趣。

D-22的學習目標：

1. 在照片下方鋪一層錯位的背景色。
   • 鋪一層錯位背景色：讓照片脫穎而出，為了讓照片更具層次感，我們可以在圖片的下方鋪上一層錯位的背景色。這會讓照片看起來更有立體感，同時與背景產生視覺上的對比。
   • 對應學習日：第十二天（區塊概念與框線屬性）、第十一天（背景屬性）。
   • 說明：這裡使用了 position: relative 和 position: absolute 來控制背景色的錯位效果，讓圖片看起來像浮在背景之上。

<div class="photo-wrapper">
    <div class="photo-background"></div>
    <img src="https://via.placeholder.com/400x400/8c8a83/FFFFFF?text=%E5%8F%AF%E6%84%9B%E5%B0%8F%E5%9C%96" alt="可愛小圖">
</div>

.photo-wrapper {
    position: relative;
    display: inline-block;
}

.photo-background {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100%;
    height: 100%;
    background-color: #c7b8a5;
    z-index: -1;
}

img {
    display: block;
}

2. 使用錯位斜線背景裝飾照片。
   • 斜線背景裝飾：增添動感與視覺效果
   • 透過使用 CSS 的線性漸層，我們可以為照片添加斜線背景，使畫面更具設計感。
   • 對應學習日：第十一天（漸層函數與背景屬性）。
   • 說明：這裡我們使用了 linear-gradient 函數來生成45度角的斜線背景，使畫面更加動態。

.photo-wrapper {
    background: linear-gradient(45deg, #c7b8a5 25%, transparent 25%);
    padding: 20px;
}

3. 改變照片的形狀。
   • 改變照片形狀：圓形、橢圓形或多邊形照片
   • 透過 CSS 的 border-radius 屬性，你可以輕鬆改變照片的形狀，讓它不再局限於方形或矩形。
   • 對應學習日：第十三天（顯示屬性）、第十四天（框線屬性）。
   • 說明：border-radius 用來創造圓形圖片，而 clip-path 則能讓你設計更加創意的照片形狀，如三角形、多邊形等。

img {
    border-radius: 50%; /* 將照片變成圓形 */
}

或者你也可以使用 clip-path 來創造更複雜的形狀，例如多邊形：

img {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

4. 利用文字的形狀來裁切照片。
   • 利用文字形狀裁切照片：讓照片與文字完美結合
   • 透過 CSS 的 shape-outside 和 clip-path 屬性，我們可以使用文字來裁切照片，實現照片與文字的創意結合。
   • 對應學習日：第十四天（框線與顯示屬性）、第十五天（多欄位排版與動畫）。
   • 說明：shape-outside 屬性用來讓文字環繞在特定形狀周圍，例如圓形，這樣的排版更具視覺吸引力。

<div class="text-clip-photo">
    <img src="https://via.placeholder.com/400x400/8c8a83/FFFFFF?text=%E5%8F%AF%E6%84%9B%E5%B0%8F%E5%9C%96" alt="可愛小圖">
    <p>勇敢追夢，不懼挑戰。</p>
</div>

.text-clip-photo {
    display: flex;
    align-items: center;
}

.text-clip-photo img {
    float: left;
    clip-path: circle(50%);
}

.text-clip-photo p {
    shape-outside: circle(50%);
    float: left;
    margin-left: 20px;
    width: 200px;
}