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

하나의 확실성은 이미지에 파란색 + 알파 색상을 오버레이하는 것입니다.

그리고 하나 개있는 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

블루, 당신은 기본 이미지와의 착색 동일한 이미지를 볼 수 있습니다 푸른.

설명

는 국경 주위에 상자 안에 있도록 상자 그림자, 삽입으로 설정됩니다. 크기가 너무 작 으면 섀도우가없는 상자의 중심을 볼 수 있습니다.

그리고 색상이 파란색이므로 알파가 다소 투명하고 배경을 볼 수 있습니다.