Question

我创建了一个包含3个flex项目的flex容器。

第一个flex项包含2个类（.flex-item和.overlay）。

我想在Flex项目上叠加图像。我通过添加z-index和位置来尝试它，但它不起作用。

＆＃13;

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.flex-item {
  margin-right: 50px;
  margin-bottom: 50px;
  flex: 0 0 15em;
  border: 2px solid red;
  height: 100px;
}

.overlay {
  background: url(https://image.freepik.com/free-icon/check-circle_318-31777.jpg) no-repeat center;
  background-size: 100px 80px;
  z-index: 110;
  position: relative;
  opacity: 0.6;    /* Real browsers */
  filter: alpha(opacity=60);   /* MSIE */
  height: 170px;
}

＆＃13;

<div class="flex-container">
  <div class="flex-item overlay">
    Image
    <img src="http://7bna.net/images/home-images/home-images-0.jpg" />
  </div>
  <div class="flex-item">
  </div>
  <div class="flex-item">
  </div>

</div>

＆＃13;

Please see the code in codepen

Answer 1

您的检查是后台，而 house 是内容，因此背景不能高于内容。将检查移动到另一个元素。

＆＃13;

.flex-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
 }

.flex-item{
  margin-right: 50px;
  margin-bottom: 50px;
  flex: 0 0 15em;
  border:2px solid red;
  height:100px;
}

.overlay:before {
  background: url(https://image.freepik.com/free-icon/check-circle_318-31777.jpg) no-repeat center;
  background-size: 100px 80px;
  z-index: 110;
  position: absolute;
  opacity: 0.6; /* Real browsers */
  filter: alpha(opacity=60); /* MSIE */
  height: 170px;
  width: 170px;
  display: block;
  content: '';
}

＆＃13;

<div class="flex-container">
  <div class="flex-item overlay">
    Image
    <img src="http://7bna.net/images/home-images/home-images-0.jpg" />
  </div>  
  <div class="flex-item">
  </div>  
  <div class="flex-item">
  </div>  
  
</div>

＆＃13;

Answer 2

＆＃13;

.container {
  position: relative;
  width: 50%; 
} 
.image { 
  display: block;
  width: 100%;
  height: auto;
} 
.overlay { 
  position: absolute;
  top: 0; 
  bottom: 0; 
  left: 0;
  right: 0;
  height: 100%;
  width: 100%; 
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}
.container:hover .overlay { 
  opacity: 1;
}
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align:center;
}

＆＃13;

<div class="container">
    <img src="http://7bna.net/images/home-images/home-images-0.jpg" alt="Avatar" class="image">
    <div class="overlay">
        <div class="text"><img src="https://image.freepik.com/free-icon/check-circle_318-31777.jpg" width="50%" />
        </div>
    </div>
</div>

＆＃13;

Answer 3

在CSS中，.overlay类在父元素上建立背景图像。

在您的HTML中，img元素将图片放置为.overlay父的子项。

根据z-index stacking contexts的规则，孩子不能出现在父母身后。因此，背景图像（父级）不能出现在img（孩子）的前面。

这就是为什么img总是在前面，而不管z-index。

但是这个问题有一个简单的解决方案。使用绝对定位的伪元素：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.flex-item {
  margin-right: 50px;
  margin-bottom: 50px;
  flex: 0 0 15em;
  border: 2px solid red;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  position: relative;
}

img {
  width: 100%;
  min-height: 0; /* https://stackoverflow.com/q/36247140/3597276 */
}

.overlay::after {
  background: url(https://image.freepik.com/free-icon/check-circle_318-31777.jpg) no-repeat center;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  background-size: contain;
  opacity: 0.6;
  content: "";
}

<div class="flex-container">
  <div class="flex-item overlay">
    <img src="http://7bna.net/images/home-images/home-images-0.jpg" />
  </div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

revised codepen

Answer 4

在position: absolute

中使用relative而不是.overlay

z-index不在flex容器中工作

4 个答案: