欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css給圖片右上角加刪除

錢琪琛1年前9瀏覽0評論

CSS能夠對網頁中的元素進行樣式設置,其中,我們可以通過CSS來為圖片添加刪除圖標,具體實現方法如下:

刪除圖標樣式設置:
.delete-icon {
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
background-image: url("delete-icon.png");
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
圖片樣式設置:
.img-container {
position: relative;
display: inline-block;
}
<div class="img-container">
<img src="example.jpg" alt="example image">
<div class="delete-icon"></div>
</div>

代碼中,首先為刪除圖標設置絕對定位,使其能夠與圖片重疊。然后,設置其在圖片的右上角,并設置圖標的大小為20px * 20px,用背景圖片來實現刪除圖標。光標懸浮在刪除圖標上時呈手指狀,并且不能重復顯示。

接下來,為圖片設置相對定位,并使用inline-block將圖片和刪除圖標標簽放在同一行內。最后,添加一個空的刪除圖標標簽,并將其插入到圖片容器中,使得刪除圖標始終與圖片一起出現。

這樣,使用CSS就可以為圖片輕松添加一個刪除圖標了。