Heojju

[CSS] 이미지 흑백처리 본문

웹개발/CSS

[CSS] 이미지 흑백처리

우주별 2018. 5. 30. 09:41

-webkit-filter : grayscale(100%)


<style type="text/css">
a img{
-webkit-filter: grayscale(100%);
filter: gray;
}
a:hover img{
-webkit-filter: grayscale(0%);
filter: none;
}
</style>
<body>
<a><img src="./woojoo.jpg"></a>
</body>



결과 : 흑백처리된 이미지. 마우스오버시에 원래 색으로 바뀝니다.






저작자표시 비영리 변경금지

'웹개발 > CSS' 카테고리의 다른 글

[CSS] cursor 속성 - 마우스 커서 변경  (0) 2017.07.14
[CSS] nth selector  (0) 2017.04.17
[CSS]placeholder color change  (0) 2017.04.17
[CSS] 버튼 클릭시 outline  (0) 2017.04.11
[CSS]div in div vertical middle  (0) 2017.04.04
'웹개발/CSS' Related Articles more