在網頁設計中，經常需要使用圖片進行裝飾或者作為網頁的背景。而有時候，為了使圖片的難看邊角被遮蓋住，我們需要在其上添加一些遮蓋層。今天，我們來講解如何使用CSS將圖片覆蓋。

/* 以下為HTML代碼 */
<div class="image-cover">
<div class="cover"></div>
</div>
/* 以下為CSS代碼 */
.image-cover {
position: relative;
}
.image-cover .cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5); /* 遮蓋層的背景顏色，這里為半透明黑色 */
}

如上代碼所示，我們通過在圖片所在的父容器內添加一個遮蓋層的div元素，再通過CSS中的position屬性將其設置為絕對位置，使其和圖片重疊在一起。然后再通過設置遮蓋層的背景顏色或者樣式來達到覆蓋圖片的效果。

有時候，我們還可以通過其他的一些方式來實現圖片的覆蓋。比如說，我們可以通過使用CSS中的z-index屬性來使遮蓋層位于圖片的上方?；蛘?，我們還可以通過使用CSS中的clip-path屬性來對圖片進行裁剪，從而達到覆蓋的效果。

/* 以下為HTML代碼 */
<div class="image-cover2">
<div class="cover"></div>
</div>
/* 以下為CSS代碼 */
.image-cover2 {
position: relative;
}
.image-cover2 img {
position: relative;
z-index: 1;
}
.image-cover2 .cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5); /* 遮蓋層的背景顏色，這里為半透明黑色 */
z-index: 2;
}

像上面這段代碼中，我們通過為圖片元素設置z-index屬性，使其位于遮蓋層之下，進而使遮蓋層覆蓋在圖片之上。同時，我們還使用了relative屬性將圖片設置為相對位置，以免在進行z-index設置時發生意外。

總之，CSS是一個非常強大的樣式表語言，它可以幫助我們輕松地實現各種網頁設計的效果。無論是將圖片覆蓋，還是對網頁進行背景填充，CSS都可以給我們提供各種方便的實現方式。