CSS是一種用于設(shè)置網(wǎng)頁(yè)樣式的語(yǔ)言。當(dāng)圖片和文本在同一頁(yè)面中時(shí)，將文本放在圖片上面可能使頁(yè)面更具有吸引力并減少頁(yè)面中的空白。在這篇文章中，我們將學(xué)習(xí)如何使用CSS來(lái)將標(biāo)簽放到圖片上面。

img {
position: relative; 
}
img:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0,0,0,0.3); 
}
p {
position: absolute; 
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
color: white; 
}

根據(jù)上面的代碼，我們首先將圖片設(shè)置為相對(duì)定位，使我們能夠在其上面使用絕對(duì)定位。然后，我們?cè)趫D像前插入了一個(gè)偽元素，并將其設(shè)為絕對(duì)定位。這個(gè)偽元素將作為覆蓋整個(gè)圖片的半透明背景。最后，我們將文字或標(biāo)簽設(shè)置為絕對(duì)定位，并通過(guò)transform將其移到圖片的中心。

如果您想將標(biāo)簽放在圖片的其他位置，可以通過(guò)更改top和left屬性的值來(lái)實(shí)現(xiàn)。同時(shí)，您也可以根據(jù)需要更改背景的顏色和不透明度。使用這些技巧，您可以在網(wǎng)頁(yè)上創(chuàng)建有趣的、令人印象深刻的效果。