带有 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生成器 - 过滤器以获得您想要的颜色效果。

当您有所需的filter时，更新您的代码以如下所示(使用从 CSS 生成器 - 过滤器站点生成的代码。查看我的 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>