CSS中,我们可以使用background-image属性来添加背景图片。为了让需要删除的图片更加显眼,我们可以将其放置在右上角,并添加一个“删除”图标。
方法如下:
.delete-icon { position: absolute; /* 相对于父元素定位 */ right: 0; top: 0; width: 20px; height: 20px; background-image: url("delete-icon.png"); /* 添加删除图标 */ background-size: contain; /* 等比例缩放 */ background-repeat: no-repeat; } .Box { position: relative; /* 父元素必须为相对定位 */ width: 200px; height: 200px; margin: 50px auto; background-image: url("background.jpg"); /* 添加背景图片 */ background-size: cover; /* 充满整个容器 */ background-position: center; /* 居中 */ }
HTML结构如下:
<div class="Box"> <img src="avatar.jpg" alt=""> <div class="delete-icon"></div> </div>
通过添加一个空的.delete-icon元素来实现“删除”图标的展示。一个典型的CSS实现可以看起来如下所示:
现在,当用户将鼠标移至图片右上角时,“删除”图标就会出现在图片上方。如果用户单击该图标,它就会触发删除事件。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。