CSS是前端開發中不可或缺的技術之一，它可以讓網頁的外觀和布局變得多姿多彩，這個技術也經常用來在圖片上覆蓋一些樣式。接下來，我們來介紹一下如何使用CSS覆蓋在圖片上。

.img-container {
position: relative;
display: inline-block;
}
.img-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background-color: black;
z-index: 1;
}
.img-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: white;
z-index: 2;
}

以上是實現效果的CSS代碼，在這段代碼中，我們使用了一個容器元素（.img-container）將圖片和覆蓋的元素包裹起來。并設置了容器元素的position屬性為relative，這樣，容器元素將作為覆蓋元素的參考點。

接下來，我們設置了覆蓋元素（.img-overlay）的position屬性為absolute，把覆蓋元素的top、left、width和height都設置為100%，這樣，覆蓋元素就會鋪滿整個容器元素，而且opacity屬性的值為0.5，表示這個元素的背景顏色是半透明的，如果我們設置為1，那么整個圖片就會被遮蓋。

然后，我們再向覆蓋元素中添加內容，我們這里添加了一行文本（.img-text），位置居中在覆蓋元素中，顏色設置為白色，在z-index屬性中設定的值也比覆蓋元素更高，這樣文字就能夠顯示出來了。

以上就是覆蓋在圖片上使用CSS的實現方法，希望對你的前端開發有所幫助。