집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3 필터를 사용하여 가장자리가 번지지 않고 이미지를 흐리게 하는 방법은 무엇입니까?

CSS3 필터를 사용하여 가장자리가 번지지 않고 이미지를 흐리게 하는 방법은 무엇입니까?

Susan Sarandon원래의: 2024-11-21 16:58:09452검색

How to Blur an Image Without Smudging Edges Using CSS3 Filters?

CSS3 필터: 가장자리 번짐 없이 이미지를 흐리게 하는 방법

CSS3 필터를 사용하여 이미지를 흐리게 하면 이미지의 가장자리도 흐려질 수 있습니다. 흐림 효과를 만들면서 선명한 가장자리를 유지하려는 경우 이는 바람직하지 않을 수 있습니다.

이 문제를 해결하려면 이미지를

요소를 선택하고 여백을 조정합니다.

숨기려면 이미지를 원하는 크기로 자를 수 있습니다.

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;
}

설명:

여백 속성은 이미지 주변의 여백을 설정하여 흐릿한 가장자리를 균등하게 상쇄합니다.
overflow: 숨겨진 속성은 이미지가
경계를 넘어 넘쳐나는 것을 방지하여 삽입 흐림과 유사한 효과를 만듭니다.

예 :

[라이브 데모](https://jsfiddle.net/NI3c4/)

HTML:

<div>
  <img src="path/to/image.jpg" />
</div>

결과:

흐릿한 영역이

요소.

위 내용은 CSS3 필터를 사용하여 가장자리가 번지지 않고 이미지를 흐리게 하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css css3 html if while Filter using Property this overflow margin https issue

성명：

이전 기사：입력 필드가 컨테이너의 전체 너비에 걸쳐 있도록 만드는 방법은 무엇입니까?다음 기사：입력 필드가 컨테이너의 전체 너비에 걸쳐 있도록 만드는 방법은 무엇입니까?