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

Answer 2

很简单，你是如此接近它。将以下内容添加到.icon-image-delete:after

text-align: center;
top: 0;

text-align: center将图标置于中心位置

top: 0;所以它位于顶部（您有right:0所以它位于右上角）

.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;
  text-align: center;
  top: 0;
  right: 0;
  height: 30px;
  width: 30px;
  background: #f5f5f5;
  color: #ff0000;
  cursor: pointer;
  border-radius: 2px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="col-3">
  <h5>Dashboard Background</h5>
  <div class="image">
    <div class="icon-image-delete">
      <img class="img-thumbnail img-fluid" src="http://placehold.it/550x450" alt="No Background" />
    </div>
  </div>
</div>

单击图像右上角的元素帖子

2 个答案:

HTML

CSS