在網(wǎng)頁設(shè)計中，圖片播放按鈕是非常重要的一個元素，可以讓用戶更加直觀地感受到圖片的修改。在CSS中，我們可以用偽元素來實現(xiàn)圖片播放按鈕。

.btn-play:before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
}
.btn-play:after {
content: "";
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-20%, -50%);
}

這里的代碼中，.btn-play是一個自定義的類名，可以用在任何包含播放按鈕的元素中。偽元素:before和:after用來分別表示三角形和圓形，可以通過border-{width|style|color}和border-radius來控制它們的樣式。

使用示例：

<div class="image-container">
<img src="image.jpg" alt="圖片">
<span class="btn-play"></span>
</div>

在上述示例中，我們將播放按鈕放在了圖片容器的第一層，使其可以自然地露出來。CSS的布局也可以根據(jù)設(shè)計需要進(jìn)行調(diào)整。

通過簡單的CSS技巧，我們可以輕松地制作出一個漂亮的圖片播放按鈕，讓網(wǎng)頁元素更加生動和有趣。