带有 html 图像和伪 css 类的非透明文本

Question

我需要在图像上放置非透明文本。此图像在 html 中定义。 （这样它可以是动态的）。我使用:after 伪元素设置透明度。我想在这张图片上有文字。好评

但是，我遇到的问题是文本继承了透明度。我发现的所有其他解决方案要么在 CSS 中定义图片，要么根本不使用图片。任何帮助将不胜感激，谢谢！

编辑：需要彩色透明度。

<div class="col-md-6" id="red-square-parent">
  <%= image_tag 'infos/home/teaching-3.jpg' %>
  <div class="centered">Don't Apply Transparency to me!</div>
</div>

#red-square-parent img{
  height: 100%;
  width: 100%;
  object-fit: none;
}

// Overlay
#red-square-parent:after{
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba($comp-color-red, 0.7);
}

Answer 1

所以，问题在于您将透明度应用于父元素。只需将图像专门用于透明度：

JSFiddle

#red-square-parent img{
  position: relative;
  opacity: 0.5;
}

#red-square-parent div{
  position: absolute;
  bottom: 40px;
  color: black;
  font-size: 50px;
}

<div class="col-md-6" id="red-square-parent">
  <img src="http://i.imgur.com/eTmzQ.jpg"/>
  <div class="centered">Don't Apply Transparency to me!</div>
</div>

为了在此图像上应用彩色滤镜，您将不会应用 background-color，因为这根本不会改变图像的颜色。

您需要做的事情有点复杂，但您必须将filter 应用于图像。

我建议使用这样的工具：CSS Generator - Filter 来获得您想要的颜色效果。

当您拥有所需的filter 时，将您的代码更新为如下所示（使用从CSS Generator - Filter 站点生成的代码。请参阅我的JSFiddle

#red-square-parent img{
  position: relative;
  opacity: 0.5;
  
  /* Filter  */
  filter: grayscale(50%) opacity(1) brightness(100%) contrast(100%) hue-rotate(500deg);
-webkit-filter: grayscale(50%) opacity(1) brightness(100%) contrast(100%) hue-rotate(500deg);
}

#red-square-parent div{
  position: absolute;
  bottom: 40px;
  color: black;
  font-size: 50px;
}

<div class="col-md-6" id="red-square-parent">
  <img src="http://i.imgur.com/eTmzQ.jpg"/>
  <div class="centered">Don't Apply Transparency to me!</div>
</div>