CSS是一種前端語言，用于控制和美化網(wǎng)頁的樣式和布局。其中，給圖片上添加圖片是一種很有趣的效果。以下是一個簡單的示例：

.cover-img {
position: relative; 
display: inline-block; 
background: url('cover.png') no-repeat center center; 
background-size: cover; 
}
.cover-img:before {
content: ''; 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
background: url('mask.png') no-repeat center center; 
background-size: 50%; 
}

首先，我們將圖片封面設(shè)置為相對定位，并使用背景設(shè)置圖片。接下來，我們使用:before偽元素來添加遮罩層。這個層是絕對定位的，并且與圖片封面的位置相同，使它們的中心點重合。我們還為遮罩層添加一個背景圖像，并通過background-size屬性設(shè)置圖像大小，使它僅覆蓋垂直和水平25%的內(nèi)容。

在這段代碼中，我們在兩個容器上使用偽元素，并添加背景圖像。在這種情況下，前一個元素包含背景，而后一個元素是遮罩層。這種方法的一個優(yōu)點是可以很容易地分離兩個元素的控制，這使得它們比使用單個元素更有靈活性。

哇！CSS真是太炫酷了！使用CSS給圖片上添加圖片，可以為您的網(wǎng)頁帶來更多的交互，并使其更加生動和吸引人。如果您想要實現(xiàn)這種效果，可以使用上面提供的代碼作為參考，發(fā)揮自己的想象力，快速上手。加油！