CSS 필터링 속성 가이드: 필터 및 회색조-CSS 튜토리얼-php.cn

CSS 过滤属性指南：filter 和 grayscale

CSS 필터 속성 가이드: 필터 및 회색조

소개:
CSS의 필터 속성(필터)은 웹 페이지에 다양한 특수 효과와 효과를 추가하여 페이지를 더욱 풍부하고 매력적으로 만들 수 있습니다. 그 중 그레이스케일(Grayscale)은 이미지를 흑백 톤으로 변환할 수 있는 일반적으로 사용되는 필터 효과입니다. 이 기사에서는 특히 회색조 효과 구현을 위한 필터 특성 및 코드 예제의 사용을 소개합니다.

1. 필터 속성 소개:
필터 속성은 CSS3의 새로운 속성으로, 요소를 렌더링할 때 이미지 처리 및 특수 효과를 수행할 수 있습니다. 필터 속성을 사용하면 흐림, 회색조, 밝기, 대비 및 기타 효과를 사용하여 이미지를 처리할 수 있습니다. 필터 속성은 이미지, 텍스트, 배경 등 모든 요소에 적용할 수 있습니다.

2. 필터 속성의 구문 및 공통 속성:
필터 속성의 기본 구문은 다음과 같습니다.

element { filter: none |  []* | initial | inherit; }

로그인 후 복사

일반적으로 사용되는 필터 속성 함수는 다음과 같습니다.

blur: 이미지를 흐리게 하며 값은 픽셀 또는 백분율입니다.
밝기: 이미지 밝기를 조정합니다. 값은 백분율입니다.
대비: 이미지 대비를 조정합니다. 값은 백분율입니다.
회색조: 이미지를 회색조로 변환합니다. 값은 백분율입니다.
invert: 이미지를 반전합니다. 값은 백분율입니다.
세피아: 이미지를 세피아로 변환합니다. 값은 백분율입니다.
saturate: 채도 변화, 값은 백분율입니다.
opacity: 요소 투명도를 설정합니다. 값은 백분율입니다.

3. 코드 예:
다음은 일반적으로 사용되는 필터 효과의 코드 예입니다.

회색조 효과(회색조):
```
img { filter: grayscale(100%); }
```
로그인 후 복사
흐림 효과(blur):
```
element { filter: blur(5px); }
```
로그인 후 복사
밝기 조정 효과 (Brightness) : :
```
element { filter: brightness(80%); }
```
로그인 후 복사
대비 조정 효과 (대비) :
```
element { filter: contrast(120%); }
```
로그인 후 복사
반전 효과 (반전) :
```
element { filter: invert(100%); }
```
로그인 후 복사
e
sepia 효과 (Sepia) :
```
element { filter: sepia(100%); }
```
로그인 후 복사
saturation Change Effect (포화). :
```
element { filter: saturate(150%); }
```
로그인 후 복사
요소 투명도 조정 효과(불투명도):
```
element { filter: opacity(50%); }
```
로그인 후 복사
위는 실제 사용 시 일반적으로 사용되는 필터 효과 예일 뿐이며 필요에 따라 매개변수 값을 조정할 수 있습니다. 다양한 필터 효과를 결합하여 더욱 특별한 효과를 만들 수 있습니다.
결론:
CSS의 필터 속성을 통해 웹 페이지에 다양한 이미지 처리 및 특수 효과를 추가할 수 있으며, 그 중 그레이스케일은 일반적으로 사용되는 그레이스케일 효과 중 하나입니다. 이 문서에서는 필터 특성의 기본 구문과 일반 속성을 간략하게 소개하고 일반적인 효과에 대한 몇 가지 코드 예제를 제공합니다. 필터 속성을 유연하게 사용하면 페이지에 시각적 매력을 더 추가하고 사용자 경험을 향상시킬 수 있습니다.
위 내용은 CSS 필터링 속성 가이드: 필터 및 회색조의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!