Question

我有一个div标签内的图像。这个div没有背景颜色，但我想添加背景颜色。但是当我添加背景颜色时，照片就会消失。

例如，当我在div标签中添加背景颜色时，cc进入div标签正在消失照片 Codepen.io DEMO HTML CODE

       <div class="cc">
<div class="container">  
<img src="http://lorempixel.com/1920/480/">
</div>
</div>

和CSS代码：

    body {
  background: #000;
}

.container {
  max-width: 1920px;  
  background-image: -moz-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
  background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );

}

img {
  max-width: 100%;
  position: relative;
  z-index: -1;
}
.cc {

  width:100%;
  height:100%;
  padding:10px;

}

Answer 1

通过CSS浏览，我遇到了z-index: -1。如果指定此项，图像将在具有更高z-index的所有元素后面呈现。因此它被隐藏了

编辑：

将.img_400px400px（具有渐变）z-index: 1和.img_400px400px img一个z-index: 2。然后你的背景颜色，渐变和图像显示。见this jsFiddle

背景颜色不适用于img

1 个答案: