具有颜色和透明度的CSS图像覆盖
具有颜色和透明度的CSS图像覆盖
提问于 2013-07-18 19:16:53
我想知道是否可以在不添加背景颜色的情况下给图像添加一个像色调一样的叠加，并改变不透明度。我没有运气，所以我想我应该在这里问一下。
我想把它变成红色，这就是我到目前为止所做的。，，，。
如果我必须调用overlay.png，但不知道是否有必要，我制作了一个图像来覆盖它。
img.highlighted {
opacity:0.4;
}基本上，我想要这样做，但反过来，当悬停时图像的色调不会在悬停时失去色调。
点击这里查看
回答 4
Stack Overflow用户
发布于 2013-07-18 20:08:58
HTML
<div class="image-holder">
<img src="http://codemancers.com/img/who-we-are-bg.png" />
</div>CSS
.image-holder {
display:inline-block;
position: relative;
}
.image-holder:after {
content:'';
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
display: block;
position: absolute;
background: blue;
opacity: 0.1;
}
.image-holder:hover:after {
opacity: 0;
}Stack Overflow用户
发布于 2013-07-18 19:47:17
如果你想反其道而行之，可以考虑这样做：
.tint:hover:before {
background: rgba(0,0,250, 0.5);
}
.t2:before {
background: none;
}看看第二张图片上的效果。
它应该看起来像this吗？
Stack Overflow用户
发布于 2013-07-18 19:48:43
像这样吗？http://codepen.io/Nunotmp/pen/wKjvB
您可以添加一个空的div并使用绝对定位。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17721960
复制相关文章
相似问题
腾讯云开发者
