CSS在圖片上加DIV是一個(gè)在前端開(kāi)發(fā)中經(jīng)常應(yīng)用的技巧。來(lái)看一下如何實(shí)現(xiàn)吧。

/* 首先，我們需要?jiǎng)?chuàng)建一個(gè)包含圖片的DIV */.container {
position: relative;
}
.container img {
max-width: 100%;
}/* 然后，在圖片上創(chuàng)建一個(gè)覆蓋它的DIV */.container:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
}/* 最后，在覆蓋的DIV上添加內(nèi)容 */.container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
}/* 注意：在使用絕對(duì)定位創(chuàng)建DIV時(shí)，需要給其創(chuàng)建一個(gè)容器DIV，否則會(huì)出現(xiàn)問(wèn)題 */

這樣就可以輕松地在圖片上添加DIV并在上面添加文字或其他元素了。是不是很簡(jiǎn)單呢？趕快嘗試一下吧！