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

Question

我在一个 div 中有几张图像，我正在尝试对图像产生影响。基本上，我只是尝试在图像上设置一个不透明度约为 0.7 的前景色，这样我仍然可以看到图像并具有该效果。

现在，我环顾四周，发现了一些非常好的解决方案，例如这个解决方案，但它与我想要实现的方法不同。

这是我的 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>

请注意layer我的 HTML 片段中的类。由于某种原因，它不能与我下面放置的 CSS 一起正常工作。从这里提供的代码来看，它layer覆盖了我的整个页面，包括其父 div 中的图像div. That's now what I want. I want it to cover only the image in its parent 。

这是我的 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%;
}

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

#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%;
}

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