[CSS] img 에 filter로 색상 넣기

img{
    -webkit-filter: opacity(.5) drop-shadow(0 0 0 gray);
    filter: opacity(.5) drop-shadow(0 0 0 gray);
}

그림에 필터씌우는 코드.

gray는 색상코드로 변경가능.

opacity는 필터 두께

filter는 흐림이나 색상변형 등 이미지, 배경, 테두리 렌더링.

 

drop-shadow(offset-x offset-y blur-radius color)

 

filter 속성

/* SVG 필터를 가리키는 URL */
filter: url("filters.svg#filter-id");

/* <filter-function> 값 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* 다중 값 */
filter: contrast(175%) brightness(3%);

/* 필터 없음 */
filter: none;

/* 전역 값 */
filter: inherit;
filter: initial;
filter: unset;

 

 

애니메이션필터(필터 변경하면서 사진 효과 강조) 예제

<button>Click to Animate</button>
<img src="super-car.jpg" />

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}

img { display: block; width: 500px; }
img.animated { -webkit-animation: filter-animation 5s infinite; }

@-webkit-keyframes filter-animation {
  0% { -webkit-filter: sepia(0) saturate(2); }  
  50% { -webkit-filter: sepia(1) saturate(8); }  
  100% { -webkit-filter: sepia(0) saturate(2); }
}
</style>
<script>
function activateFilterAnimation() {
  $('img').toggleClass('animated');
}

$('button').on('click', activateFilterAnimation);
</script>