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

이미지 필터

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

이미지 필터


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>



 

목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
3056
CSS Word Spacing 단어 간격
3055
CSS Text Direction 텍스트 방향
3054
CSS Line Height 라인 높이
3051
CSS Letter Spacing 글자 간격 1
3050
CSS Text Indentation 텍스트 들여 쓰기
3049
CSS 텍스트 변환 Text Transformation
3046
CSS 텍스트 방향 Text Direction
3045
CSS 라인 높이 Line Height
3044
HTML 글자 간격 Letter Spacing
3043
CSS text-indent
3042
CSS text-transform
3041
CSS text-decoration
3040
CSS Text Alignment
3039
CSS Text Color
3038
CSS Outline - Shorthand property
3034
CSS Outline Width
3033
CSS Outline Color
3032
CSS CSS Outline
3027
CSS CSS Box Model
3026
CSS Setting max-width
3025
CSS CSS Height and Width
3024
CSS CSS Padding
3023
CSS CSS Margins
3022
CSS CSS Border Properties
3021
CSS CSS Syntax and Selectors
3020
HTML The HTML <audio> Element
3019
HTML HTML <video> 요소 1
3018
HTML html google map
3017
HTML SVG와 캔버스의 차이점
3016
HTML SVG Logo
이전 다음
전체 목록