CSS - 有色不透明

我想知道是否可以将色调应用于css中的不透明度？CSS - 有色不透明

我有一个不同大小的PNG。当用户悬停在PNG上时，我希望PNG以＃000的色调将不透明度更改为0.5。根据w3schools，您只能修改不透明度值，而不是总是设置为#FFF的色调。

我试图将其不透明度设置在我的PNG顶部，并通过CSS让它在PNG悬停时在display:none/block;之间切换。这不起作用，因为我的PNG不是矩形图像，并且各种尺寸都意味着黑盒不仅仅覆盖我的PNG。

对我的问题还有其他解决方案吗？

2013-05-01 Jon

“据W3Schools的” - 停在那儿。 – lifetimes 2013-05-01 22:25:31

@Zenith - 你的意思是w3schools不是一个可靠的来源，或者没有其他的选择？ – Jon 2013-05-01 22:26:16

@Jon他们是万维网上最糟糕的资源之一 – 2013-05-01 22:26:43

div:hover { opacity: .5; -webkit-filter: grayscale(100%) sepia(100%); }

这里使用了CSS filter property，这是开始gain support。有许多可能的效果，所以你可能会实现你的原始黑色/灰色色调的愿望。

2013-05-01 22:28:41

完美。谢谢:) – Jon 2013-05-01 22:33:04

没问题。请记住，浏览器支持并不完整，但您可以使用旧的IE过滤器作为后备，和/或也可以考虑使用SVG过滤器（已经有更多的浏览器支持）。取决于你想投入多少努力。 – 2013-05-01 22:36:08

这个工作在FireFox/IE9 +上吗？ – Jon 2013-05-01 22:41:01

您可以将背景颜色应用于悬停时的图像以获得所需的效果。这里有一个例子：http://jsfiddle.net/atbnn

img:hover { 
    opacity: 0.5; 
    background: #000; 
}

2013-05-01 22:28:28

回答