테스트 사이트 - 개발 중인 베타 버전입니다
SIR

이미지 필터

수다왕
프로필 보기이 회원 글보기
 · 8년 전 · 2034

이미지 필터


CSS filter속성은 시각적 효과 (예 : 흐림 및 채도)를 요소에 추가합니다.


참고 : 필터 속성은 Internet Explorer, Edge 12 또는 Safari 5.1 이하에서는 지원되지 않습니다.


예

모든 이미지의 색상을 흑백으로 변경하십시오 (100 % 회색).


img {

    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */

    filter: grayscale(100%);

}



[전체소스]

<!DOCTYPE html>

<html>

<head>

<style>

img {

    width: 33%;

    height: auto;

    float: left; 

    max-width: 235px;

}


.blur {-webkit-filter: blur(4px);filter: blur(4px);}

.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}

.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}

.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}

.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}

.invert {-webkit-filter: invert(100%);filter: invert(100%);}

.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}

.saturate {-webkit-filter: saturate(7); filter: saturate(7);}

.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}

.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}

</style>

</head>

<body>


<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>


<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300">


</body>

</html>



 

목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
3643
레이아웃 로딩 타입 1번 스킨 및 코드 링크로 들어와서 긁어가세요. 10
3631
레이아웃 로딩 타입2(어제에 이어서... 그리고 개발자 설명 추가) 11
3627
레이아웃 버튼 UI(hover시 테두리 애니메이션 및 색깔변경) 3
3621
레이아웃 로딩 타입5(글자 귀엽게 통통 요청사항) 4
3619
HTML 스크롤다운시 모션효과
3617
HTML 안드로이드 아이폰 기기별 SMS 문자버튼
3610
HTML 간단한 FLEX 예제
3609
HTML 간단한 반응형 페이지 레이아웃 1
3608
HTML 간단한 Flex 활용 예제 1
3607
CSS 가운데 정렬. 가장 심플?(정리) 1
3606
CSS textarea의 이런 트릭? 들어보지도 못했던? 2
3603
CSS css의 상속에 관한 팁입니다. 3
3602
HTML 구글 검색 최적화하는 태그 입니다. 2
3601
기타 GNUBOARD5에서 SVG 로딩바로 백로딩을 띄우는 코드에요 2
3600
CSS aspect-ratio 활용하기
3595
기타 준비중, 공사중 임시페이지 - 마우스에 반응하며 움직이는 기하학 배경 2
3591
CSS 개인적으로 꼭 이해하고 넘어가야 할 것 3가지 8
3587
CSS progress 엘레먼트의 스타일링 3
3578
반응형 [bootstrap5] 모바일에서 br태그 줄바꿈 기능 없애기
3567
반응형 모바일에서 br태그 줄바꿈 기능 없애기 7
3561
웹접근성 웹 표준 검사하기
3560
반응형 반응형을 위한 미디어쿼리 2
3559
CSS Animation 동작 효과 주기 2
3557
HTML 버튼 클릭시 리스트 스크롤 상단으로 이동하기
3555
HTML 모바일 정회원 가입페이지 만들어주실분 있을까요?? 1
3554
CSS body 외부 정렬
3552
CSS 이미지 비율대로 리사이징 하기 1
3551
CSS flex 레이아웃 1
3550
CSS flex 개념 이해하기 좋은 사이트 4
3537
기타 howler.js 2
이전 다음
전체 목록