css - 具有任意颜色的CSS3滤镜

我将举一个例子：考虑您有一个div，其中有一个背景图片，将鼠标悬停在该图片上，并向该图片中添加了一些颜色，就像滤镜一样，但是它是单色（也是透明的，所以您仍然可以看到原始图像。css3中的滤镜，至少我所见的滤镜（http://html5-demos.appspot.com/static/css/filters/index.html）不提供单色操作，这样的事情可以实现吗？

我考虑过将元素悬停在div（z索引）上方，并在其上显示带有某些颜色的透明背景的事情，但是我不知道css3是否可能。

最佳答案

您可以执行以下操作：

#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中查看。

关于css - 具有任意颜色的CSS3滤镜，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19080902/