我正在尝试在某些图像的右上角叠加一个字体图标。 我只希望在单击图标时触发一个事件,但正如我目前所拥有的那样,整个图像都会触发单击。 有什么更好的方法来构建它以便我可以完成上述任务?
<div class="col-3">
<h5>Dashboard Background</h5>
<div class="image">
<div class="icon-image-delete">
<img class="img-thumbnail img-fluid" src="@Url.Action("Render", "Image", new { type = PreferenceImageType.DashboardBackground })" alt="No Background" />
</div>
</div>
</div>
CSS
.icon-image-delete {
position: relative;
vertical-align: middle;
display: inline-block;
}
.icon-image-delete:after {
font-family: FontAwesome;
content: '\f014';
font-size: 20px;
position: absolute;
right: 0;
height: 30px;
width: 30px;
background: #f5f5f5;
color: #ff0000;
cursor: pointer;
border-radius: 2px;
}
最佳答案
这是图标和图像的替代定位:https://jsfiddle.net/jthy3q0o/2/
HTML
<div class="col-3">
<h5>Dashboard Background</h5>
<div class="image">
<span class="icon-image-delete"></span>
<img class="img-thumbnail img-fluid" src="https://1.img-dpreview.com/files/p/TC190x190S190x190~sample_galleries/9912837935/2779432071.jpg" alt="No Background" />
</div>
</div>
CSS
.image {
position: relative;
width: 190px;
height:190px;
}
.icon-image-delete:before {
position: relative;
vertical-align: middle;
display: inline-block;
font-family: FontAwesome;
content: "\f014";
font-size: 20px;
position: absolute;
padding: 10px;
right: 0;
background: #f5f5f5;
color: #ff0000;
cursor: pointer;
border-radius: 2px;
}
关于html - 仅单击图像右上角的元素位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44060812/