css - 使用 css3 为背景图像着色

Question

是否可以使用 css3 为灰度背景图像着色？

这是一个图标。我希望它是蓝色的。

input[name=email] { background-image: url(/static/images/icons/glyphicons_010_envelope.png); background-size: 16px auto; background-position: 8px 7px; }

Answer 1

一种可能性是在图像上覆盖蓝色 + alpha 颜色。

这样做的一种可能性是：

.base {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, black, white, black);
}
#shadow {
    box-shadow: 0px 0px 3000px 0 rgba(0,0,255,0.5) inset;
 }

为了避免寻找黑白图像，我在基础中设置了渐变。

然后，在阴影中，我创建了一个巨大的嵌入阴影，蓝色，alpha 0.5

演示

在演示中，您可以看到基本图像，并且同一图像被染成蓝色。

解释

盒子阴影被设置为 inset，所以它在盒子里面，在边界周围。如果尺寸太小，您会看到盒子的中心没有阴影。

而且，由于颜色是带有 alpha 的蓝色，它有点透明，你可以通过它看到背景。