html - 仅单击图像右上角的元素位置

Question

我正在尝试在某些图像的右上角叠加一个字体图标。我只希望在单击图标时触发一个事件，但正如我目前所拥有的那样，整个图像都会触发单击。有什么更好的方法来构建它以便我可以完成上述任务？

<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;
}

Answer 1

这是图标和图像的替代定位: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;
}