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