Question

我想弄清楚我是否可以像图片一样添加叠加层，并在不添加背景颜色的情况下更改不透明度。我没有运气，所以我想我会问这里 我想用不透明度把它变成红色。 这是我到目前为止所拥有的。

如果我必须调用overlay.png但我不知道是否有必要，我制作了一个覆盖它的图像。

img.highlighted {
   opacity:0.4;
}

基本上我想这样做但反过来，因为当盘旋时图像变暗不会在盘旋时消除色彩。
在这里查看
http://jsbin.com/igahay/3011/edit

Answer 1

如果您可以使用CSS3，请尝试使用CSS:filter ans特别-webkit-filter
^{（这不是一个完全跨浏览器的解决方案......）}

<img src="image.jpg" />
<style>
   img:hover {
      -webkit-filter: hue-rotate(240deg) saturate(3.3); 
   }
</style>

这里有一些在线演示：

希望它有所帮助..或者至少指出你正确的方向。

Answer 2

<强> JSFiddle Demo

<强> 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;
}

Answer 3

如果你想要反过来你考虑这样做：

.tint:hover:before {
    background: rgba(0,0,250, 0.5);

  }

  .t2:before {
    background: none;
  }

并查看第二张图片的效果。

它应该看起来像this吗？

Answer 4

您是否试过 Webkit过滤器？

您不仅可以操作不透明度，还可以操作颜色，亮度，亮度和其他属性：

Answer 5

这样的事情？ http://codepen.io/Nunotmp/pen/wKjvB

您可以添加空div并使用绝对定位。

具有颜色和透明度的CSS图像叠加

5 个答案: