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何时存在，那么你可以决定使用{{1隐藏<{1}}元素隐藏在其父元素之后}}

请参阅下面的演示：

z-index

如果图片位于.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> 绝对上方 - 如果{{1}元素不存在，图标将显示 - 请参阅下面的演示：

img

Answer 2

您可以在此处使用伪元素::after作为背景图片，无论是i还是img，都会覆盖任何子元素。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: