使用css3爲背景圖像着色

使用css3着色灰度背景圖像有可能嗎？使用css3爲背景圖像着色

這是一個圖標。我希望它是藍色的。

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

來源

2012-09-22 chovy

參見： http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css – Puyol

一個可能性是在圖像上覆蓋藍色+ alpha顏色。

而且一個posibility要做到這一點是：

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

爲了避免找一種黑色的&白色圖像，我已在基地的梯度。

然後，在陰影中，我創建了一個規模龐大的插圖陰影，藍色阿爾法0.5

demo

在演示中，可以看到基本圖像，並在有色相同的圖像藍色。

說明

盒子陰影設置爲插圖，所以它是盒子裏面，四周邊框。如果尺寸太小，你會看到沒有陰影的盒子中心。

而且，由於顏色是帶有alpha的藍色，因此它有點透明，您可以通過它看到背景。

來源

2013-07-19 19:07:34 vals

你能解釋一下的box-shadow是如何着色背景圖像？我不明白這是如何工作的。 – chovy

新增說明！ – vals

謝謝。我明白，但你的演示影子的中間仍然是灰色的。只有邊緣染成藍色。 – chovy

使用css3爲背景圖像着色

回答

相關問題