html - 是否可以在图像上使用半透明的前景色？

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 一起正常工作。从此处提供的代码来看，层 覆盖了我的整个页面，包括其父级 div 中的图像。这就是我现在想要的。我希望它仅覆盖其父 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%;
}

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

感谢任何帮助。 谢谢

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>