CSS에서 흐림 거리를 설정하는 방법은 무엇입니까?

CSS(Cascading Style Sheets)는 웹 사이트의 시각 효과를 디자인하기 위한 강력한 도구입니다. Blur 효과는 Blur를 사용하여 모든 요소 속성을 흐리게 하는 데 사용되는 CSS의 많은 기능 중 하나입니다. 부드럽고 몽환적인 효과를 만들거나 페이지의 특정 요소에 주의를 끌기 위해 흐림 효과를 사용할 수 있습니다.

문법

으아아아

CSS의 퍼지 거리 개념

퍼지 거리 설정의 실질적인 측면을 논의하기 전에 퍼지 거리의 개념을 이해하는 것이 중요합니다. 요소에 적용된 흐림 정도를 흐림 거리라고 합니다. 값은 픽셀(px), em 또는 기타 CSS 단위로 정의할 수 있습니다.

"blur" 속성을 사용하여 CSS에서 흐림 거리를 적용하는 방법

CSS에서 흐림 거리를 설정하려면 흐림 속성을 사용해야 합니다. Blur 속성은 요소에 적용되어야 하는 흐림 정도를 설정합니다. Blur 속성을 사용하려면 먼저 흐림 효과를 적용할 요소를 선택한 다음 Blur 속성을 원하는 값으로 설정합니다.

예를 들어 이미지에 흐림 효과를 적용하려면 다음 CSS 코드를 사용할 수 있습니다.

으아아아

여기에서는 "img" 요소를 선택하고 5픽셀 흐림 효과를 적용했습니다.

예 1

다음은 위 방법의 전체 코드 예시입니다.

으아아아

웹페이지의 다양한 요소에 다양한 흐림 거리를 적용할 수 있습니다. 이를 위해 각 요소를 개별적으로 선택하고 "blur" 속성을 원하는 값으로 설정하면 됩니다. 예를 들어 -

으아아아

여기에서는 첫 번째 "h1"과 두 번째 "img"라는 두 요소를 선택하고 그에 따라 3픽셀 및 5픽셀 흐림 효과를 적용했습니다.

예 2: 다양한 요소에 다양한 흐림 거리 적용

으아아아

CSS에서 거리를 흐리게 하여 초점 효과 만들기

초점 효과를 만드는 것은 CSS에서 흐림 효과를 사용하는 가장 일반적인 방법입니다. 이 효과는 초점이 맞춰진 요소를 제외한 웹페이지의 모든 요소에 흐림 효과를 적용하여 얻을 수 있습니다.

CSS에서 거리가 흐려진 초점 효과를 만들려면 ":not" 의사 클래스와 함께 "blur" 속성을 사용하세요. ':not' 의사 클래스를 사용하면 사용자가 특정 요소를 제외한 모든 요소를 ​​선택할 수 있습니다. 예를 들어 -

으아아아

여기에서는 사용자가 "blur" 클래스 위로 마우스를 가져갈 때 "blur" 클래스의 모든 하위 요소에 "blur" 속성을 적용합니다. 이 효과는 "no-blur" 클래스가 있는 요소에서는 작동하지 않습니다. "no" 의사 클래스를 사용하면 흐림 효과에서 "no-blur" 클래스가 있는 요소가 제외되기 때문입니다.

예 3

다음은 위 방법의 전체 코드 예시입니다.

으아아아

결론

CSS에서 흐림 거리를 설정하는 것은 웹 페이지에 시각적 매력을 더하는 간단하고 효과적인 방법입니다. 다음 예를 사용하면 웹 페이지에 흐림 효과를 쉽게 만들 수 있습니다.

위 내용은 CSS에서 흐림 거리를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!