CSS3 필터(Filters)

CSS3필터 효과는 이미지에 시각 효과를 적용하는 쉬운 방법을 제공합니다。

CSS를 이해하다3필터 함수를 논의할 것입니다.

이 장에서는 CSS3에 도입된 필터 효과를 사용하여, 이미지와 같은 그래픽 요소에 시각 효과를 적용하기 전에, 불림, 대비와 밝기, 색饱和도와 같은 시각 효과를 조정할 수 있습니다.

CSS3 filter 속성은 필터 효과를 요소에 적용하며, 이 속성은 제공된 순서대로 하나나 여러 개의 필터 함수를 받아줍니다. 다음과 같은 예제를 참조하세요：

filter:　blur()　|　brightness()　|　contrast()　|　drop-shadow()　|　grayscale()　|　hue-rotate()　|　invert()　|　opacity()　|　sepia()　|　saturate()　|　url();

경고：모든 버전의 Internet Explorer는 현재 CSS를3필터 효과. 오래된 IE 버전은 불규준한 filter 속성을 사용하여 불투명도와 같은 효과를 생성할 수 있지만, 이 기능은 더 이상 사용되지 않습니다。

블러 효과

같은 고사상 효과와 같은 Photoshop에서 사용할 수 있는 blur() 함수는 요소에 대해 CSS 길이 값을 받아서 가우시안 블러를 적용할 수 있습니다. 큰 값은 더 많은 블러를 생성합니다. 파라미터가 제공되지 않으면, 값 0을 사용합니다。

img　{
　　　　-webkit-filter:　blur(5px);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　blur(5px);
}

—위 예제의 출력은 다음과 같습니다:

이미지 밝기 설정

brightness() 함수는 이미지의 밝기를 설정하는 데 사용됩니다. 값 0%는 전체 검은 이미지를 생성합니다. 반대로 값100% 또는1이미지를 변환하지 않습니다. 다른 값은 효과의 선형 곱수입니다。

또한, 밝기를 높게 설정할 수 있습니다.100％，이렇게 하면 이미지가 더 밝아집니다. 수량 파라미터가 누락되면, 값1。음수 값을 사용할 수 없습니다。

img.bright　{
　　　　-webkit-filter:　brightness(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　brightness(200%);
}
img.dark　{
　　　　-webkit-filter:　brightness(50%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　brightness(50%);
}

—위 예제의 출력은 다음과 같습니다:

이미지 대비 조정

contrast() 함수는 이미지의 대비를 조정하는 데 사용됩니다. 값 0%는 전체 검은 이미지를 생성합니다. 반대로 값100% 또는1이미지를 변환하지 않습니다. 또한,100％의 값으로 인해 대비가 낮은 결과를 제공합니다. 수량 파라미터가 누락되거나 생략된 경우1그 값을 사용합니다。

img.bright　{
　　　　-webkit-filter:　contrast(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　contrast(200%);
}
img.dim　{
　　　　-webkit-filter:　contrast(50%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　contrast(50%);
}

—위 예제의 출력은 다음과 같습니다:

이미지에 그림자를 추가합니다

drop 속성을 사용하여 이미지에 그림자를 추가할 수 있습니다-shadow() 함수는 Photoshop와 같은 이미지에 그림자 효과를 적용합니다. 이 기능은 다음과 같습니다box-shadow속성.

img　{
　　　　-webkit-filter:　drop-shadow(4px　4px　10px 주황);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　drop-shadow(4px　4px　10px 주황);
}

—위 예제의 출력은 다음과 같습니다:

이미지를 회색으로 변환합니다

이 grayscale() 기능을 사용하여 이미지를 회색으로 변환할 수 있습니다. 값100%는 완전한 회색입니다. 값 0%는 입력을 그대로 유지합니다. 0%에서100%는 효과의 선형 곱수입니다. 'amount' 매개변수가 누락되면 값 0을 사용합니다.

img.complete-gray　{
　　　　-webkit-filter:　grayscale(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　grayscale(100%);
}
img.partial-gray　{
　　　　-webkit-filter:　grayscale(50%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　grayscale(50%);
}

—위 예제의 출력은 다음과 같습니다:

이미지에 톤 회전을 적용합니다

이 hue-rotate() 기능은 이미지에 톤을 회전시킵니다. 전달된 매개변수는 이미지 샘플의 톤 루프 주위에서 회전할 도수를 정의합니다. 0deg는 이미지를 그대로 유지합니다. angle이 누락되면39;39; 매개변수, 0deg는 값을 사용합니다. 최대 값이 없으며, 위의 값은 효과를 유지합니다.360deg 반복.

img.hue-normal　{
　　　　-webkit-filter:　hue-rotate(150deg);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　hue-rotate(150deg);
}
img.hue-wrap　{
　　　　-webkit-filter:　hue-rotate(480deg);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　hue-rotate(480deg);
}

—위 예제의 출력은 다음과 같습니다:

반전 효과

invert() 함수를 사용하여 이미지에 Photoshop와 같은 반전 효과를 적용할 수 있습니다. 100％ 또는1의 값은 완전히 반전됩니다. 값 0％는 입력을 그대로 유지합니다. 0％에서100％ 간의 값은 효과의 선형 곱수입니다. 'amount' 매개변수가 누락되면 값 0을 사용합니다. 음수 값을 사용할 수 없습니다.

img.partially-inverted　{
　　　　-webkit-filter:　invert(80%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　invert(80%);
}
img.fully-inverted　{
　　　　-webkit-filter:　invert(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　invert(100%);
}

—위 예제의 출력은 다음과 같습니다:

이미지에 불투명도를 적용합니다

opacity() 기능은 이미지에 투명도를 추가할 수 있습니다. 값 0%는 완전 투명입니다.의 값100% 또는1이미지를 변경하지 않도록 합니다. 값 0%는 완전 투명입니다.의 값100%는 효과의 선형 곱수입니다. 매개변수가 누락되면39; amount' 매개변수, 그렇다면 값 사용1。이 기능은 다음과 같습니다opacity속성.

img　{
　　　　-webkit-filter:　opacity(80%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　opacity(80%);
}

—위 예제의 출력은 다음과 같습니다:

이미지에 갈색 효과를 적용합니다

sepia() 기능은 이미지를 브론즈 톤으로 변환합니다.100% 사이의 값은 완전히 브론즈 톤입니다.1완전히 브론즈 톤입니다. 값 0%는 이미지를 그대로 유지하고, 값 0%와100%는 효과의 선형 곱수입니다. 매개변수가 누락되면39; amount' 매개변수, 그렇다면 값 0 사용

img.complete-sepia　{
　　　　-webkit-filter:　sepia(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　sepia(100%);
}
img.partial-sepia　{
　　　　-webkit-filter:　sepia(30%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　sepia(30%);
}

—위 예제의 출력은 다음과 같습니다:

이미지의 분해도 조정

saturate() 기능은 이미지의 분해도를 조정할 수 있습니다. 값 0%는 완전히 비분해도입니다. 값100%는 이미지를 그대로 유지합니다. 다른 값은 효과의 선형 곱수입니다. 또한 값이100％，그로 인해 과대칭 결과를 제공합니다. amount & 매개변수가 누락되면39; amount ' 매개변수, 그렇다면 값 사용1。

img.un-saturated　{
　　　　-webkit-filter:　saturate(0%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　saturate(0%);
}
img.super-saturated　{
　　　　-webkit-filter:　saturate(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　saturate(200%);
}

—위 예제의 출력은 다음과 같습니다: