CSS樣式表的功能非常強(qiáng)大，不僅可以美化HTML頁(yè)面的布局，還可以對(duì)其中的圖片進(jìn)行一些特殊的增強(qiáng)處理。其中，為圖片添加div元素，可以讓圖片的交互性更強(qiáng)，下面我們就來學(xué)習(xí)一下如何在CSS圖片里添加div。

img{
position: relative;
display: block;
margin: 50px auto;
max-width: 100%;
}
img:hover + .overlay {
opacity: 1;
}
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity .5s ease;
}
.overlay:hover{
cursor: pointer;
}

上述代碼實(shí)現(xiàn)的是，在圖片中放置一個(gè)半透明的遮罩層，當(dāng)鼠標(biāo)懸停在圖片上時(shí)，遮罩層顯示，同時(shí)鼠標(biāo)的樣式顯示為手型，以示交互性。

首先，我們需要對(duì)圖片進(jìn)行定位，使其與文本存在一定的空隙，同時(shí)實(shí)現(xiàn)水平居中和自適應(yīng)寬度的效果。因此，我們對(duì)img元素進(jìn)行了如下的樣式設(shè)定。

img{
position: relative;
display: block;
margin: 50px auto;
max-width: 100%;
}

接著，我們定義一個(gè).overlay類，使用絕對(duì)定位將其覆蓋在圖片上方，并設(shè)置其起始透明度為0。同時(shí)，為了讓遮罩層能夠與圖片大小一致，我們將其四個(gè)方向的距離都設(shè)置為0。

.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity .5s ease;
}

最后，通過:hover偽類的觸發(fā)，當(dāng)鼠標(biāo)懸停在img元素上時(shí)，我們可以通過+選擇器選中它的下一個(gè)同層級(jí)元素，即.overlay，并將其透明度設(shè)置為1，達(dá)到遮罩層顯示的效果。

img:hover + .overlay {
opacity: 1;
}
.overlay:hover{
cursor: pointer;
}

通過以上CSS樣式的應(yīng)用，我們成功地為圖片添加了交互遮罩層，并實(shí)現(xiàn)了鼠標(biāo)樣式的改變，增加了頁(yè)面的可交互性和美觀性。