具有任意颜色的css3过滤器

Question

我举个例子:假设你有一个带有图像背景的 div，你将鼠标悬停在它上面，一些颜色会添加到图像中，很像一个滤镜，但它是一个单一颜色(也是透明的，所以你仍然可以看到原始图像。css3 中的过滤器，至少我看到的这些(http://html5-demos.appspot.com/static/css/filters/index.html)不提供单一颜色操作。这样的事情可以实现吗？

我考虑过在 div(z 索引)顶部添加一个元素，当它悬停在上面时会出现带有一些颜色的透明背景，但我想知道这是否可能使用 CSS3。

Answer 1

你可以这样做:

#the-div {
    width: 500px;
    height: 500px;
    background: url(http://placekitten.com/500/500) no-repeat center center;
    position: relative;
}
#the-div:hover:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}

在 jsFiddle 中查看。