编辑：

Question

他每个人都在努力寻找一个CSS，该CSS可以使我的特色图像覆盖，这样您就可以更清楚地看到我的标题。对于网站www.quinstudio.nl/gallery。你知道我如何使它工作吗？

? {
background: #000;
opacity: .1;
}

Answer 1

有几种方法可以解决此问题。结果如何并没有真正的区别。您可以使用最适合您所拥有标记的方法。第一种方法稍微简单一点，因为没有添加空div作为颜色叠加层。

选项1：使彩色背景不透明，并使图像部分透明。

.image-wrapper {
  display: inline-block;
  background: #0cd;
  
  /* You need this line for the centered h1 below to work. */
  position: relative;
}

.image-wrapper img {
  opacity: 0.5;
  display: block;
}

.image-wrapper h1 {
 /* Here's a trick for centering your title, if you want. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  
  color: #fff;
 }

<div class="image-wrapper">
  <img src="https://loremflickr.com/320/240" alt="Kitten">
  <h1>Kitty!</h1>
</div>

选项2：使图像不透明，并在其顶部放置部分透明的覆盖层。

.image-wrapper {
  display: inline-block;
  position: relative;
}

.image-wrapper img {
  display: block;
}

.image-overlay {
  background: #000;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2; /* puts this div 'in front' of the image */
}

.image-wrapper h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  z-index: 3; /* puts the text in front of the dark overlay */
}

<div class="image-wrapper">
  <img src="https://loremflickr.com/320/240" alt="Kitty!">
  <div class="image-overlay"></div>
  <h1>Kitty?</h1>
</div>

Answer 2

虽然@jack的答案很好，但我想分享一个不使用<img>元素而是使用:after伪元素的替代方法。

这使您可以在容器上使用CSS背景图像，并从本质上添加一个伪造的元素，该元素上带有颜色叠加层：

.container {
   background: url(https://loremflickr.com/320/240);
   width: 320px;
   height: 240px;
   position: relative;
}

.overlay > * {
  z-index: 1;
  position: relative;
  color: #fff;
}

.overlay:after {
  content: "";
  background: #0095ee;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: .65;
}

<div class="overlay container">
  <h1>Title</h1>
</div>

编辑：

您的情况有所不同。您可以降低图像的不透明度，并为其父容器添加黑色背景。请尝试以下操作：

.edgt-justified-layout .edgt-ni-inner .edgt-ni-image-holder .edgt-post-image img {
    opacity: .75;
}

.edgt-justified-layout .edgt-ni-inner .edgt-ni-image-holder .edgt-post-image {
    background: #000;
}

它将降低图像的不透明度（使其看起来更“白”，因此我们可以在其父容器中添加黑色（或所需的任何颜色）背景以补偿并变暗。

如何在特色图片上获得背景色低不透明度叠加层？

2 个答案:

编辑：