CSS 圖片添加小叉叉是一種常見的設計樣式,可以為網頁增添美觀性和交互性。下面我們來講講如何實現。
.image{ position: relative; display: inline-block; } .image img{ display: block; width: 100%; height: auto; } .image span{ position: absolute; top: 0; right: 0; width: 30px; height: 30px; background: url(https://example.com/close.png) no-repeat; background-size: 100% 100%; cursor: pointer; }
上述代碼中,我們首先定義了一個.image
類,設定了相對定位和內聯塊的屬性,這使得包含img
和span
的元素可以垂直居中。我們設置了圖片的寬度為父容器的 100%,并自動適應高度。最后一個用span
元素為圖片上方疊加了一個大小為 30px 的關閉按鈕,背景圖使用了遠程 URL,設置了光標樣式為手形指針。
這樣,我們就可以通過添加 .image 類將圖片嵌入到網頁中,并為其添加關閉按鈕。如果需要適用其他樣式,可以根據具體情況進行更改。
上一篇vue執行函數刪除
下一篇css 圖片等比縮放居中