6

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

我有各种尺寸的PNG。当用户将鼠标悬停在 PNG 上时，我希望 PNG 将不透明度更改为 0.5，色调为 #000。根据w3schools，您只能修改不透明度值，而不能修改始终设置为 #FFF 的色调。

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

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

4

2 回答 2

7

Webkit 示例：http: //jsfiddle.net/5APXu/1/

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

这使用了开始获得支持的 CSS过滤器属性。有许多可能的效果，因此您可能可以实现您对黑色/灰色色调的原始愿望。

于 2013-05-01T22:28:41.463 回答
1

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

img:hover {
  opacity: 0.5;
  background: #000;
}
于 2013-05-01T22:28:28.387 回答