[CSS] PNG, SVG 파일 CSS로 색상 변경하기

PNG 파일 CSS로 색상 변경하기

.button { 
    width: 40px; height:40 px
    background:rgb(0,35,255); 
	-webkit-mask-box-image:url('...png');
	mask-image: url('...png');
	background-position:center;  background-size:cover;  position:relative; 
}

.button:hover{ 
	transition:0.4s;  background:rgba(0,35,255,0.8);
}

 

SVG파일 CSS로 색상 변경하기

주의: mask-image는 ie 브라우저 미지원!!!  

height: 50px;

/* Background Option 1: Use a background-color as the fill */
background-color: red;

/* Background Option 2: Use a background-image as the fill */
background-image: url(background.png);

/* Syntax Option 1: mask shorthand */
mask: url(icon.svg) no-repeat 50% 50%;
-webkit-mask: url(icon.svg) no-repeat 50% 50%;

/* Syntax Option 2: mask-image only */
mask-image: url(icon.svg);
-webkit-mask-image: url(icon.svg);