이미지 필터

수다왕

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

· 8년 전 · 조회 2040 2040

이미지 필터

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에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
977	CSS	수직 탐색 막대 예제	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1657
976	CSS	Vertical Navigation Bar [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2108
975	CSS	Navigation Bars	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1601
974	CSS	[CSS] Float : left, right, inherit, none.	이희현 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	5239
973	CSS	CSS 투명한 호버 효과 2	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3243
972	CSS	CSS 투명한 호버 효과	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3043
971	CSS	CSS 불투명도 / 투명성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2123
970	HTML	레이아웃용 테이블에<th>나scope이 사용될 경우에는 오류임.	위토즈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3035
969	HTML	IE9 이전 버전에서 Canvas 사용가능하도록 하는 js 라이브러리 [2]	위토즈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3511
968	CSS	CSS 결합 자 - 인접한 형제 선택기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2432
967	CSS	CSS 결합 자 - 하위 선택자	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1920
966	CSS	CSS 결합 자 - 하위 선택기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1689
965	CSS	CSS 레이아웃 - 이미지 센터하기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2684
964	CSS	CSS 레이아웃 - 가운데 맞춤 텍스트	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2572
963	CSS	CSS 레이아웃 - 가운데 정렬 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3102
962	CSS	float : The clearfix Hack(clearfix 해킹)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1800
961	CSS	float : The clear Property(clear 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1485
960	CSS	CSS 레이아웃 - 플로팅 및 삭제	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2262
959	CSS	CSS Overflow auto	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1884
958	CSS	CSS Overflow Hidden	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2140
957	CSS	CSS Overflow Visible	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2180
956	CSS	css position Overlapping Elements(겹치는 요소들)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2044
955	CSS	css position: absolute;	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2204
954	CSS	css position: fixed;	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2331
953	CSS	CSS 레이아웃 - position: relative; 속성 [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2880
952	CSS	CSS 레이아웃 - position static 속성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2491
951	CSS	너비, 최대 너비 및 여백 사용 : auto; 사용	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2367
950	CSS	display:block	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1843
949	CSS	Display: none;	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1897
948	CSS	display 속성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2084