집 >웹 프론트엔드 >CSS 튜토리얼 >날카로운 가장자리를 유지하면서 CSS3에서 정의된 흐림 효과를 어떻게 얻을 수 있습니까?

날카로운 가장자리를 유지하면서 CSS3에서 정의된 흐림 효과를 어떻게 얻을 수 있습니까?

Barbara Streisand원래의: 2024-11-16 14:10:03302검색

How Can I Achieve a Defined Blur Effect in CSS3 While Preserving Sharp Edges?

CSS3 필터 흐림으로 정의된 가장자리 달성

CSS 필터 속성을 사용하여 이미지에 흐림 효과를 적용할 때 다음과 같은 일반적인 문제가 발생합니다. 이미지의 가장자리도 흐려집니다. 특히 날카로운 선이나 세부 사항을 유지해야 하는 경우 바람직하지 않은 결과가 발생할 수 있습니다.

이 문제를 해결하고 정의된 가장자리를 유지하려면 영리한 기술을 사용할 수 있습니다. 흐린 이미지를

요소를 사용하고 특정 CSS 스타일을 적용하면 "삽입 흐림" 효과를 생성할 수 있습니다.

다음 코드 조각은 이 효과를 얻는 방법을 보여줍니다.

img {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}

div {
    overflow: hidden;
}

이 코드에서 < ;img> 요소는

오버플로가 숨겨짐으로 설정되어 있습니다. 이렇게 하면 흐릿한 이미지가

가장자리에서 잘려서 흐림 효과가 주변으로 퍼지는 것을 방지할 수 있습니다.

또한 요소를

내에서 약간 이동합니다. 이러한 여백 값을 조정하여 가장자리를 유지하면서 원하는 정도의 흐림 효과를 만들 수 있습니다.

이 기술은 정의된 흐림 효과를 효과적으로 생성하여 이미지 내부의 세부 사항을 부드럽게 하면서 가장자리를 선명하게 유지합니다.

위 내용은 날카로운 가장자리를 유지하면서 CSS3에서 정의된 흐림 효과를 어떻게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css css3 while Filter using Property this overflow issue

성명：

이전 기사：Webkit 브라우저에서 색상 입력 상자를 어떻게 사용자 정의할 수 있습니까?다음 기사：Webkit 브라우저에서 색상 입력 상자를 어떻게 사용자 정의할 수 있습니까?