Preview
CSS Code
필터 컨트롤
인기 있는 필터
Vintage
Neon Glow
Polaroid
빈티지 필름
디지털 아트
CSS 필터를 사용하는 방법
CSS 필터란 무엇입니까?
CSS 필터를 사용하면 흐림 또는 색상 이동과 같은 그래픽 효과를 요소에 적용할 수 있습니다. 일반적으로 이미지, 배경 및 테두리에 사용됩니다.
필터는 외부 이미지 편집 도구 없이도 시각 효과를 만들거나, 이미지를 향상시키거나, 고유한 디자인 요소를 만드는 데 사용할 수 있습니다.
지원되는 CSS 필터 속성
-
blur()- 요소에 가우시안 흐림 효과를 적용합니다. -
brightness()- 요소의 밝기를 조정합니다. -
contrast()- 요소의 대비를 조정합니다. -
grayscale()- 요소를 회색 음영으로 변환합니다. -
hue-rotate()- 요소에 색조 회전을 적용합니다. -
invert()- 요소의 색상을 반전시킵니다. -
opacity()- 요소의 불투명도를 조정합니다. -
saturate()- 요소를 포화시키거나 채도를 낮춥니다. -
sepia()- 요소를 세피아로 변환합니다.
필터를 적용하는 방법
이 도구에서 생성된 CSS 코드를 사용하여 모든 HTML 요소에 필터를 적용할 수 있습니다. 방법은 다음과 같습니다.
1. 요소 선택
필터를 적용할 HTML 요소를 선택합니다. 이것은 이미지, 배경 또는 다른 요소일 수 있습니다.
2. 클래스 또는 ID 추가
요소에 아직 클래스나 ID가 없는 경우 하나를 추가하면 CSS로 더 쉽게 타겟팅할 수 있습니다.
3. 필터 적용
CSS 사용filter속성을 사용하여 생성된 필터를 적용할 수 있습니다.
.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }4. 여러 필터 결합
여러 필터 함수를 공백으로 구분하여 하나씩 나열하여 결합할 수 있습니다.
filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);브라우저 호환성
CSS 필터는 Chrome, Firefox, Safari, Edge 및 Opera를 포함한 최신 브라우저에서 널리 지원됩니다. 그러나 Internet Explorer와 같은 이전 브라우저는 이를 지원하지 않습니다.
Related Tools
스타일러스를 CSS로 변환
SCSS 코드를 CSS로 변환합니다. 빠르고, 쉽고, 안전합니다.
CSS3 전환 생성기
부드러운 불투명도 전환
CSS 변환기에 덜
Less 코드를 CSS로 변환합니다. 빠르고, 쉽고, 안전합니다.
XML을 JSON으로 손쉽게 변환
클릭 한 번으로 XML 데이터를 구조화된 JSON 형식으로 변환할 수 있습니다. 빠르고 안전하며 완전한 브라우저 기반입니다.
Base64에서 JSON으로 디코더
Base64로 인코딩된 문자열을 형식이 지정된 JSON으로 즉시 변환합니다. 데이터 업로드 없이 브라우저에서 로컬로 작동합니다.
URL 인코딩 도구
브라우저에서 바로 URL 매개변수를 쉽게 인코딩할 수 있습니다.