在底层内容图像上叠加 div 背景图像

Question

当存在包装器 div 的背景图像时，我试图在包装器 div 内隐藏图像/i 标记。基本上，在包装器 div 内部，当包装器 div 的背景中没有图像时，会有一个图标。但是，当将背景图像设置为包装 div 时，背景图像应该重叠，因此将图标隐藏在 div 内。

我的问题是图标和 div 背景颜色同时显示。

HTML

<div class="img-fluid rounded-circle avatar">
    <i class="material-icons icon">account_circle</i>
</div>

CSS

.avatar {
    width: 40px;
    height: 40px;
    border: 1px solid cadetblue;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: cadetblue;
    background-position: 50% 50%;
    background-size: cover;
    position: relative;
}

.icon {
}

Answer 1

您可能无法将其设置为i 元素在background-image 之后。但是您可以这样做 - 如果您知道background-image 何时存在而何时不存在，您可以决定使用z-index 隐藏其父元素背后 的i 元素。

请看下面的演示：

.wrapper {
  display: inline-block;
  border: 1px solid;
  margin: 10px;
  padding: 10px;
}

.avatar {
  border: 1px solid cadetblue;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: cadetblue;
  background-position: 50% 50%;
  background-size: cover;
  position: relative;
}

.bck-image {
  background-image: url("http://placehold.it/50x50");
}

.img-fluid.avatar {
  width: 40px;
  height: 40px;
}

.my-icon-hidden .icon {
  z-index: -1;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="wrapper">
  With background image
  <div class="img-fluid rounded-circle avatar bck-image">
    <i class="material-icons icon">account_circle</i>
  </div><br/>z-index: -1
  <div class="img-fluid rounded-circle avatar my-icon-hidden bck-image">
    <i class="material-icons icon">account_circle</i>
  </div>
</div>

<div class="wrapper">
  No background image
  <div class="img-fluid rounded-circle avatar">
    <i class="material-icons icon">account_circle</i>
  </div><br/>z-index: -1
  <div class="img-fluid rounded-circle avatar my-icon-hidden">
    <i class="material-icons icon">account_circle</i>
  </div>
</div>

如果图像在img 元素中，您可以将图像定位在i 上方绝对 - 所以如果img 元素不存在，图标将显示 - 请参阅下面的演示：

.wrapper {
  display: inline-block;
  border: 1px solid;
  margin: 10px;
  padding: 10px;
}

.avatar {
  border: 1px solid cadetblue;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: cadetblue;
  background-position: 50% 50%;
  background-size: cover;
  position: relative;
}

.img-fluid.avatar {
  width: 40px;
  height: 40px;
  overflow: hidden;
}
.avatar i, .avatar img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.avatar i {
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar img {
  z-index: 1;
  object-fit: cover;
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="wrapper">
  Without img element
  <div class="img-fluid rounded-circle avatar">
    <i class="material-icons icon">account_circle</i>
  </div>
</div>

<div class="wrapper">
  With img element
  <div class="img-fluid rounded-circle avatar">
    <i class="material-icons icon">account_circle</i>
    <img src="http://placehold.it/100x100"/>
  </div>
</div>

Answer 2

您可以使用伪元素（此处为::after）作为背景图像，当存在时，它将覆盖任何子元素，无论它是i 还是img。

.avatar {
  border: 1px solid cadetblue;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.avatar::after {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background-position: 50% 50%;
  background-size: cover;
  border-radius: inherit;                  /* added to prevent overflow  */
  overflow: hidden;                        /* added to prevent overflow  */
}
.bck-image::after {
  background-image: url("http://placehold.it/100/f00");
}
.img-fluid.avatar {
  width: 40px;
  height: 40px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="img-fluid rounded-circle avatar bck-image">
  <i class="material-icons icon">account_circle</i>
</div>


<div class="img-fluid rounded-circle avatar">
  <i class="material-icons icon">account_circle</i>
</div>