CSS 捉迷藏插畫教程圖片

/* HTML 代碼 */
<div class="container">
<div class="puzzle"></div>
<div class="solution"></div>
</div>
/* CSS 代碼 */
.container {
position: relative;
width: 300px;
height: 300px;
}
.puzzle {
width: 100%;
height: 100%;
box-sizing: border-box;
border: 20px solid #000;
border-radius: 20px;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 2;
clip-path: polygon(55% 22%, 64% 40%, 88% 30%, 97% 45%, 70% 65%, 85% 84%, 50% 80%, 40% 60%, 26% 78%, 12% 60%, 37% 40%);
}
.solution {
width: 100%;
height: 100%;
box-sizing: border-box;
border: 20px solid #000;
border-radius: 20px;
background-image: url('https://picsum.photos/300/300');
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

這是一篇關(guān)于如何使用 CSS 制作一個(gè)捉迷藏插畫的教程。該插畫被分成兩部分：拼圖和解析圖像。使用 clip-path 屬性可以制作出拼圖的形狀，使用背景圖像來制作解決方案的插圖。

首先，設(shè)置容器的寬度和高度，讓其成為一個(gè)正方形。在該容器內(nèi)部，添加兩個(gè) div，一個(gè)拼圖和一個(gè)解決方案。在拼圖的 div 中，使用 clip-path 屬性創(chuàng)建一個(gè)多邊形，該多邊形將在解決方案中顯示出來。使用 z-index 屬性可以使拼圖位于解決方案的上方。

在解決方案的 div 中，使用背景圖像來代替實(shí)際圖像。使用 z-index 屬性可以將其放置在拼圖下方。在邊框和背景色方面，它應(yīng)與拼圖 div 相同。