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

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

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

demo

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

解释

框阴影设置为内嵌，使其位于框内，边框周围。如果尺寸太小，您会看到盒子的中心没有阴影。

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