배경 이미지에 CSS 필터 효과를 사용하는 방법
P粉022285768
P粉022285768 2023-08-20 13:28:36
0
2
478
<p>검색 페이지의 배경 이미지로 사용하고 있는 JPEG 파일이 있고 Backbone.js 컨텍스트에서 작업하고 있기 때문에 CSS를 사용하여 설정하고 있습니다. </p> <pre class="brush:php;toolbar:false;">배경 이미지: url("whatever.jpg");</pre> <p>CSS 3 흐림 필터를 배경에만 적용하고 싶지만 해당 요소에만 스타일을 지정하는 방법을 모르겠습니다. 시도하면: </p> <pre class="brush:php;toolbar:false;">-webkit-filter: Blur(5px); -moz-filter: 흐림(5px); -o-filter: 흐림(5px); -ms-필터: 흐림(5px); 필터: 흐림(5px);</pre> <p>위 코드를 내 CSS의 <code>배경 이미지</code>에 넣으면 배경뿐만 아니라 전체 페이지의 스타일이 지정됩니다. 이미지만 선택하고 해당 이미지에 필터를 적용하는 방법이 있나요? 또는 페이지의 다른 요소에 대한 흐림 효과를 끄는 방법이 있습니까? </p>
P粉022285768
P粉022285768

모든 응답(2)
P粉491421413

추가 요소가 필요하지 않아 콘텐츠가 다른 솔루션처럼 고정/절대적이지 않고 문서 흐름에 맞게 들어갈 수 있습니다.

다음 방법을 사용하여

를 달성하세요.

으아악 으아악

Edit 가장자리의 흰색 테두리를 제거하려면 110%的宽度和高度以及-5%의 왼쪽과 위쪽을 사용하세요. 이렇게 하면 배경 이미지가 약간 확대되지만 가장자리를 통해 단색이 번지는 현상은 없습니다. 제안해 주신 Chad Fawcett에게 감사드립니다.

으아악 으아악
P粉270842688

노트북을 확인해 보세요.

배경 이미지용 컨테이너와 콘텐츠용 컨테이너 등 두 개의 서로 다른 컨테이너를 사용해야 합니다.

이 예에서는 .background-image.content라는 두 개의 컨테이너를 만들었습니다.

모두 position: fixedleft: 0; right: 0;进行定位。它们显示的差异来自于为元素设置的不同z-index 값을 사용합니다.

으아악 으아악
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿