CSS 필터:블러를 사용하여 이미지 흐림 효과 얻기(코드 예)

이 문서의 내용은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!