在網(wǎng)頁(yè)設(shè)計(jì)中，插入圖片是必不可少的。同時(shí)，為了達(dá)到更好的視覺(jué)效果，我們需要給這些圖片添加一些特效。此時(shí)，CSS就派上用場(chǎng)了。 那么，如何在圖片上插入CSS呢？接下來(lái)，我們將一步步講解。 首先，我們需要在HTML中添加一張圖片。請(qǐng)看下面的代碼：

<img src="picture.jpg" alt="這是一張圖片">

這里，我們添加了一張名為“picture.jpg”的圖片，并設(shè)置了它的“alt”屬性。 接著，我們需要定義一些CSS樣式，來(lái)對(duì)這張圖片進(jìn)行修改。請(qǐng)看下面的代碼：

<style>
p {
position: relative;
}
p img {
display: block;
width: 100%;
height: auto;
}
p::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
opacity: 0;
z-index: 1;
transition: opacity .2s ease-in-out;
}
p:hover::before {
opacity: 1;
}
</style>

代碼中，我們將圖片定位在一個(gè)“p”標(biāo)簽中，并為這個(gè)“p”標(biāo)簽設(shè)置“position: relative”屬性。接著，我們修改了“p”標(biāo)簽下的“img”標(biāo)簽，加入了“display: block”（使其成為塊狀元素）和“width: 100%”（使其充滿容器的寬度）屬性。 隨后，我們定義了一個(gè)“p::before”偽元素，并為它設(shè)置了“content: ""”和“position: absolute”屬性。接著，我們?cè)O(shè)置了該偽元素在容器的左上角，并將它的寬高設(shè)置為100%（占據(jù)整個(gè)容器）。我們還為它設(shè)置了“background: rgba(0, 0, 0, .5)”屬性，即半透明的黑色背景，并設(shè)置了初始的“opacity: 0”屬性值。最后，我們還為這個(gè)偽元素設(shè)置了“transition: opacity .2s ease-in-out”屬性，以實(shí)現(xiàn)漸變動(dòng)畫(huà)效果。 接下來(lái)，我們?yōu)椤皃:hover::before”偽元素添加了“opacity: 1”屬性，以實(shí)現(xiàn)鼠標(biāo)懸停時(shí)的顯示效果。 最后，我們將這個(gè)CSS樣式應(yīng)用到之前的“p”標(biāo)簽中，即可實(shí)現(xiàn)在圖片上插入CSS的效果。