Question

我在div中有几张图片，我试图对图像产生影响。基本上，我只是试图在图像上使用大约0.7的不透明度使前景色，这样我仍然可以看到图像并产生这种效果。

现在，我环顾了S.O，我找到了一些非常好的解决方案，例如this one，但它与我想要实现的方法不同。

这是我的HTML

<div class="col colMg">
    <div class="prodImg">
        <img src="images/model1.jpg" alt="" title="" />
        <div class="layer"></div>
    </div>

    <div class="prodImg">
        <img src="images/model2.jpg" alt="" title="" />
    </div>
</div>

请注意我的HTML代码段中的layer类。出于某种原因，它与我下面提到的CSS无法正常工作。从此处提供的代码中，layer涵盖了我的整个页面，包括其父div. That's now what I want. I want it to cover only the image in its parent div`中的图像。

这是我的CSS

#prodIntro{
    margin-top: 10px;
    width: 50%;
    background-color: red;
    display: block;
    display:visible;
}

.col{
    width: 33%;
    float: left;
}

.colMg{
    margin-right: 0.5%;
}

.prodImg{
    width: 100%;
}

.prodImg img{
    width: 100%;
}
.layer{
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

感谢任何帮助。感谢

Answer 1

您需要应用非静态位置（position: static是大多数（如果不是全部）HTML元素的默认位置），而不是您想要定位.layer的祖先。因此，整个文件：

.prodImg{
    position: relative;
    width: 100%;
}

#prodIntro {
  margin-top: 10px;
  width: 50%;
  background-color: red;
  display: block;
  display: visible;
}
.col {
  width: 33%;
  float: left;
}
.colMg {
  margin-right: 0.5%;
}
.prodImg {
  position: relative;
  width: 100%;
}
.prodImg img {
  width: 100%;
}
.layer {
  background-color: rgba(248, 247, 216, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="col colMg">
  <div class="prodImg">
    <img src="images/model1.jpg" alt="" title="" />
    <div class="layer"></div>
  </div>

  <div class="prodImg">
    <img src="images/model2.jpg" alt="" title="" />
  </div>
</div>

是否可以在图像上具有半透明的前景色？

1 个答案: