CSS 圖片上加圖片是給網(wǎng)頁設(shè)計(jì)增加更多互動性的一種方式，讓網(wǎng)頁看起來更加生動活潑。在本文中，我們將通過例子來演示如何在圖片上加圖片的方法。

代碼如下：
.image-container {
position: relative;
/* 加上相對定位 */
display: inline-block;
/* 讓 .image-container 和 img 元素同行 */
}
.image-container:after {
content: '';
position: absolute;
/* 加上絕對定位 */
top: 0;
left: 0;
right: 0;
bottom: 0;
/* 可以理解為為 .image-container 元素加上一層遮罩 */
background-image: url('overlay.png');
background-size: contain;
/* 圖片填充整個 .image-container 元素 */
background-repeat: no-repeat;
/* 不重復(fù) */
opacity: 0.7;
/* 設(shè)置透明度 */
}
.image-container img {
display: block;
/* 讓 img 元素脫離文檔流 */
max-width: 100%;
/* 讓圖片自適應(yīng)容器大小 */
}

在上述代碼中，我們通過設(shè)置遮罩來在圖片上加上了一張透明圖片。遮罩加上了一些透明度，讓底部的圖片更加明亮。

如果您想要在遮罩層上加上文本或者其他元素，只需要在 .image-container 屬性中設(shè)置 z-index 屬性來使得遮罩層處于最上面，然后使用其余的元素來做進(jìn)一步的設(shè)計(jì)。

總之，通過在圖片上加上圖片，可以讓網(wǎng)頁設(shè)計(jì)更具活力，讓用戶在瀏覽網(wǎng)頁時(shí)感到更加愉悅。