css - 具有任意颜色的 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 中查看。