가장자리를 선명하게 유지하면서 이미지를 흐리게 할 수 있나요?

CSS3 필터 흐림 배경으로 정의된 가장자리

이미지를 흐리게 하면 부드러움과 깊이가 추가되지만 가장자리의 선명도가 저하되는 경우가 많습니다. 선명한 윤곽선을 유지하면서 흐릿한 효과를 얻을 수 있습니까?

해결책: 오버플로 및 네거티브가 있는 Div 여백

CSS:

div {
  overflow: hidden;
}

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

HTML:

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

이 솔루션은 흐린 이미지를 배치합니다. 숨겨진 오버플로가 있는 div 내. 이미지에 음수 여백을 설정하여 div 내에서 이를 오프셋하여 흐릿하지 않은 원본 가장자리를 드러냅니다.

데모:

[가장자리가 정의된 흐릿한 이미지 이미지 ]

어떻게요? 작품:

• div는 흐릿한 이미지가 경계 밖으로 흘러나오는 것을 방지합니다.
• 음수 여백은 이미지를 약간 안쪽으로 밀어 넣어 흐릿하지 않은 외부 가장자리를 드러냅니다.
• 흐림 필터가 이미지에 적용되어 가장자리를 그대로 두고 깊이를 더해줍니다.

이 기술은 "삽입 흐림" 효과를 효과적으로 시뮬레이션하여 원하는 흐림 효과와 선명도의 조합을 제공합니다.

위 내용은 가장자리를 선명하게 유지하면서 이미지를 흐리게 할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!