이미지 필터

수다왕

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 2041 2041

이미지 필터

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>

</body>

</html>

댓글 작성

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

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
857	HTML	The placeholder Attribute(자리 표시 자 특성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1387
856	HTML	The pattern Attribute(패턴 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1845
855	HTML	The multiple Attribute(다중 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2079
854	HTML	속성 값(The value Attribute)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1495
853	HTML	입력 유형 URL(Input Type Url)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2191
852	HTML	입력 유형 전화(Input Type Tel) 전화번호 형식만들기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3271
851	HTML	입력 유형 날짜 / 시간 - 로컬(Input Type Datetime-local)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3243
850	HTML	입력 유형 URL(Input Type Url)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2084
849	HTML	Input Type Tel	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1666
848	HTML	input date input color	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1821
847	HTML	입력 제한(Input Restrictions) 1	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1710
846	HTML	HTML5 input 유형	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1910
845	HTML	Input Type Radio Input Type Checkbox Input Type Button	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2035
844	HTML	Input Type Submit , Input Type Reset	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1976
843	HTML	Input Type Text , Input Type Password	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2193
842	HTML	HTML5 form 요소 datalist keygen output	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2040
841	HTML	html textarea button 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1964
840	HTML	html input select 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2325
839	HTML	HTML NAME 속성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1906
838	HTML	HTML METHOD POST GET	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2175
837	HTML	html form action	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2012
836	HTML	<fieldset>을 사용하여 양식 데이터 그룹화	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2031
835	HTML	html form submit	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2194
834	HTML	html form input 객체	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1537
833	HTML	HTML 레이아웃 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1894
832	HTML	HTML <script> 요소 HTML <base> 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1379
831	HTML	뷰포트 설정하기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2436
830	HTML	[HTML <head> 요소] 1	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1650
829	HTML	HTML The class Attribute	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1255
828	HTML	[HTML 블록 및 인라인 요소]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2476