이 문서의 내용은 CSS 필터를 사용하여 이미지의 흐림 효과를 얻는 방법에 관한 것입니다. 도움이 필요한 친구들은 이를 참조할 수 있습니다. 본문을 살펴보겠습니다.
최근 CSS에서 filter:blur 문제가 발생했습니다. 먼저 아래와 같이 페이지의 이미지를 살펴보겠습니다.
HTML:
<div class="imageContainer"> <img src="image/1.jpg" alt="CSS 필터:블러를 사용하여 이미지 흐림 효과 얻기(코드 예)" > </div>
CSS:
.imageContainer {
border: solid 5px black;
width: 1024px;
height: 768px;
}
자, 이제 멋진 흐림 효과 적용:
img {
-webkit-filter: blur(30px);
}효과는 다음과 같습니다:
이미지가 컨테이너 경계 너머로 흐려지고 흐릿한 이미지와 검은색 테두리 사이에 "빛나는" 효과가 나타나는 것을 관찰했습니다. 이제 수정해 보겠습니다. 이 질문.
해결책:
.imageContainer {
overflow: hidden;
}
img {
+transform:scale(1.1);
}효과는 다음과 같습니다:
위 내용은 CSS 필터:블러를 사용하여 이미지 흐림 효과 얻기(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
