1

is it possible to color a grayscale background image using css3?

It is for an icon. I want it to be blue.

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

1 に答える 1

1

1 つの可能性は、画像に青 + アルファ色を重ねることです。

そして、これを行う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;
 }

白黒画像を探すのを避けるために、ベースにグラデーションを設定しました。

次に、シャドウで、巨大なサイズのインセット シャドウを作成し、アルファ 0.5 の青を作成します。

デモ

デモでは、基本イメージと同じイメージを青く着色したものを見ることができます。

説明

ボックスの影は、境界の周りのボックスの内側になるように、はめ込みとして設定されます。サイズが小さすぎると、影のないボックスの中心が表示されます。

また、色はアルファ付きの青なので、やや透明感があり、背景が透けて見えます。

于 2013-07-19T19:07:34.773 に答える