CSS 필터

이전 단어

CSS 필터는 요소의 흐림, 선명화, 변색 등의 작업에 주로 사용됩니다. 이번 글에서는 CSS 필터 필터

구문

filter

초기값: 없음

적용 대상: 모든 요소

값: 없음 | 흐림() | 대비() | 회전() | invert() | opacity() | sepia() | url()

호환성: IE 브라우저 및 android4.3은 지원하지 않습니다. android4.4 이상에서는 추가 예정 -webkit-prefix

  [참고] 여러 개의 필터를 구분하려면 공백을 사용하세요. 필터는 일반적으로 백분율(예: 75%) 또는 소수(예: 0.75)

회색조

회색조

  회색조를 사용하면 이미지가 회색으로 변합니다. 값이 100%이면 완전히 회색조 이미지로 변환됩니다. 값이 0%이면 이미지가 변경되지 않습니다. 기본값은 0

채도

채도

  값이 0%이면 이미지의 채도가 완전히 낮아진 것을 의미하고, 값이 100%이면 이미지에 변화가 없음을 의미합니다. 100% 이상의 값이 허용되며 이는 채도가 더 높다는 것을 나타냅니다. 값을 설정하지 않을 경우 기본값은 1입니다.

  세피아를 사용하여 이미지를 세피아로 변환합니다. 100% 값은 완전한 세피아이고, 0% 값은 이미지에 변화가 없습니다. 설정하지 않을 경우 기본값은 0

Hue

hue-rotate

색상을 통해 이미지에 색상을 적용합니다. -회전 회전합니다. "angle" 값은 이미지가 조정되는 색상환 각도를 설정합니다. 값이 0deg이면 이미지에 변화가 없습니다. 값을 설정하지 않은 경우 기본값은 0deg입니다. 이 값에는 최대값은 없지만 360deg를 초과하는 값은 다시 한 바퀴 도는 것과 같습니다. 🎜 > 입력 이미지를 반전시켜 반전시킵니다. 100%는 완전한 반전을 의미하고, 0% 값은 이미지에 변화가 없음을 의미합니다. 값이 설정되지 않은 경우 기본값은 0

투명도

불투명도

입니다. 영상. 값이 0%이면 완전히 투명하고, 값이 100%이면 이미지가 변경되지 않습니다. 값이 설정되지 않은 경우 기본값은 1입니다. 이 기능은 기존 불투명도 속성과 매우 유사합니다. 차이점은 필터를 통해 일부 브라우저에서는 성능 향상을 위해 하드웨어 가속을 제공한다는 것입니다.

밝기

밝기

  밝기를 조절하여 더 밝게 또는 더 어둡게 보이게 해보세요. 값이 0%이면 이미지가 완전히 검은색이 됩니다. 값이 100%이면 이미지에 변화가 없습니다. 100% 이상의 값이면 괜찮고 이미지가 이전보다 밝아집니다. 설정한 값이 없으면 기본값은 1 입니다. 설정한 경우 이미지가 완전히 회색으로 표시됩니다. 값은 100%이고 이미지는 변경되지 않습니다. 값은 100%를 초과할 수 있으며, 이는 낮은 대비가 사용된다는 의미입니다. 설정된 값이 없을 경우 기본값은 1

Blur

blur

를 통해 이미지에 가우시안 블러를 설정합니다. 흐림. "반지름" 값은 가우스 함수의 표준 편차, 즉 화면에서 얼마나 많은 픽셀이 함께 혼합되는지를 설정하므로 값이 클수록 흐릿해집니다. 값이 설정되지 않은 경우 기본값은 0입니다. 이 매개변수는 CSS 길이 값을 설정할 수 있지만 백분율 값은 허용되지 않습니다. ​​

shadow

drop-shadow

  drop-shadow(h-shadow v-shadow 흐림 확산 색상)는 이미지에 그림자 효과를 설정하는 데 사용됩니다. 그림자는 이미지 아래에 합성되며 흐릿해질 수 있으며 특정 색상으로 칠할 수 있는 매트의 오프셋 버전입니다. 이 함수는 "inset" 키워드가 허용되지 않는다는 점을 제외하고

유형(CSS3 컨텍스트에 정의됨)의 값을 허용합니다. 이 기능은 기존 box-shadow 속성과 매우 유사합니다. 차이점은 필터를 통해 일부 브라우저는 더 나은 성능을 위해 하드웨어 가속을 제공한다는 것입니다.

매개변수는 다음과 같습니다:

<offset-x><offset-y>(必须)   这是设置阴影偏移量的两个<length>值。<offset-x>设定水平方向距离，<offset-y>设定垂直距离。如果两个值都是0，则阴影出现在元素正后面
<blur-radius>(可选)          这是第三个<length>值。值越大，越模糊，则阴影会变得更大更淡。不允许负值。若未设定，默认是0(则阴影的边界很锐利)
<spread-radius>(可选)        这是第四个<length>值。正值会使阴影扩张和变大，负值会使阴影缩小。若未设定，默认是0(阴影会与元素一样大小)
<color>(可选)                查看<color>该值可能的关键字和标记。若未设定，颜色值会应用color属性的值。另外，如果颜色值省略，WebKit中阴影是透明的</color></color></length></spread-radius></length></blur-radius></offset-y></offset-x></length></offset-y></offset-x>

Drop-Shadow는 내부 그림자를 지원하지 않지만 box-shadow에서는 얻을 수 없는 불규칙한 이미지의 그림자를 얻을 수 있습니다

  [참고] Box Shadow에 대한 자세한 내용은 여기로 이동합니다

<style>
body{background-color: gray;}
.box{width: 260px;margin: 20px; padding: 20px;background-color: #fff;position: relative;font-size: 24px;line-height: 40px;}
.cor{position: absolute;left: -29px; top:27px;border: 15px solid transparent;border-right-color: #fff;}
.box-shadow{box-shadow: 5px 5px 10px black;}
.drop-shadow{filter: drop-shadow(5px 5px 10px black);}
</style>

<p>
    <i></i>
    box-shadow
</p>
<p>
    <i></i>
    filter: drop-shadow
</p>

더 많은 CSS 필터 및 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!