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就可以為圖片輕松添加一個刪除圖標了。
上一篇mysql季度查詢
下一篇mysql 日期轉化