使用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

一个可能性是在图像上叠加蓝色+阿尔法颜色。

这样做的一个可能性是：

.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;
 }

避免寻找黑色＆amp;白色图像，我在基础上设置了渐变。

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

demo

在演示中，您可以看到基本图像，以及蓝色的相同图像。

<强>解释

框阴影设置为插图，因此它位于框内，边框周围。如果尺寸太小，你会看到盒子的中心没有阴影。

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