CSS實現碎片拼成圖片是一種非常有趣的效果。這種效果通常用于展示頁面的創意和獨特性。本文將介紹如何使用CSS實現這種效果。

//HTML結構
<div class="wrapper">
<div class="pieces"></div>
</div>
//CSS樣式
.wrapper {
width: 400px;
height: 400px;
background-image: url('your-image-url.jpg');
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.pieces {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
.pieces:before {
content: "";
position: absolute;
background-color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
border-radius: 50%;
}
.pieces:after {
content: "";
position: absolute;
background-image: url('your-image-url.jpg');
background-size: cover;
top: -50px;
left: -50px;
width: 300px;
height: 300px;
transform: rotate(45deg);
}

以上代碼中，我們首先定義了一個包裹圖片的容器wrapper，設置了容器的寬高和背景圖片。接著，我們定義了一個碎片的容器pieces，將其定位在wrapper的中央，設置了它的寬高和溢出隱藏。在碎片容器的:before偽元素中，我們創建了一個白色圓形。這個圓形將會成為我們拼圖的一個碎片。在碎片容器的:after偽元素中，我們將背景圖片旋轉了45度，并將它通過top和left屬性定位到了碎片容器左上角的位置。由于背景圖片比碎片容器大，我們只展示了圖片的一部分。這樣，我們就實現了一個由白色圓形和圖片碎片拼成的圖片效果。