CSS3 필터로 이미지를 흐리게 할 때 가장자리를 선명하게 유지하는 방법은 무엇입니까?

CSS3 필터 흐림으로 정의된 가장자리 유지

CSS3을 사용하여 이미지에 필터: 흐림() 속성을 적용하면, 이미지도 흐려질 수 있습니다. 이미지의 나머지 부분을 흐리게 하면서 선명한 가장자리를 유지하려는 경우 이는 바람직하지 않을 수 있습니다.

해결책: 숨겨진 오버플로가 있는 음수 여백

동시에 선명한 가장자리를 얻으려면 이미지를 흐리게 하려면

요소. 이 기술에는 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;
}

div {
  overflow: hidden;
}

이 접근 방식은 이미지 가장자리가 선명하게 유지되고 이미지의 나머지 부분은 흐릿해지는 출력을 생성합니다. . 요소는 이미지 주변의 "버퍼 영역" 역할을 하여 흐림 효과가 해당 경계를 넘어 확장되지 않도록 합니다.

데모:

[고양이 이미지 날카로운 모서리와 흐린 배경]

HTML:

<div>
  <img src="http://placekitten.com/300" />
</div>

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

원천：php.cn

이전 기사：CSS 특이성에서 `.foo a:link`가 `a:hover`를 재정의하는 이유는 무엇입니까? 다음 기사：Flexbox 항목이 사용 가능한 공간을 채우기 위해 늘어나는 것을 방지하는 방법은 무엇입니까?

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

• Java로 건너뛰기 목록 작성
  2025-01-26 02:05:09
• 요소를 교환하여 사전식으로 가장 작은 배열 만들기
  2025-01-26 02:04:12
• 패스 오브 엑자일 2: 의식 농업 가이드
  2025-01-26 02:03:10
• ViewModel에서 WPF TextBox에 포커스를 설정하는 방법은 무엇입니까?
  2025-01-26 02:02:09
• Stalker 2: Heart Of Chornobyl - 유령 추적 연습
  2025-01-26 02:01:09
• ViewModel에서 WPF의 텍스트 상자에 초점을 프로그래밍 방식으로 설정하려면 어떻게해야합니까?
  2025-01-26 01:56:12
• 뷰 모델에서 WPF TextBox에 포커스를 설정하는 방법은 무엇입니까?
  2025-01-26 01:51:08
• ViewModel에서 WPF TextBox에 프로그래밍 방식으로 초점을 설정하려면 어떻게 해야 합니까?
  2025-01-26 01:46:12
• ViewModel에서 WPF TextBox로 초점을 설정하는 방법은 무엇입니까?
  2025-01-26 01:41:09
• Entity Framework를 사용할 때 내 ASP.NET GridView에서 'ObjectContext 인스턴스가 삭제되었습니다...'가 발생하는 이유는 무엇입니까?
  2025-01-26 01:36:12

최신 이슈

function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...

에서 2024-04-29 11:01:01

0

3

2579

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

0

11

2718

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

0

1

2304

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

0

1

2160

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

0

0

2269

관련 주제

더>

• 비트코인을 얻는 방법
• 파이썬으로 비디오를 재생하는 방법
• gettickcount 함수의 사용법
• Excel 대각선 헤더가 두 개로 나뉩니다.
• mysql에서 재귀 쿼리를 구현하는 방법
• direct3d 기능을 사용할 수 없습니다
• Ouyi 거래 플랫폼 앱
• 하드웨어 방화벽과 소프트웨어 방화벽의 차이점은 무엇입니까