배경 이미지에 CSS 필터를 적용하는 방법
P粉722409996
P粉722409996 2023-08-21 11:18:28
0
2
525
<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粉722409996
P粉722409996

모든 응답(2)
P粉976737101

다른 솔루션처럼 고정/절대적이지 않고 추가 요소의 필요성을 제거하고 콘텐츠를 문서의 흐름에 맞게 조정합니다.

다음을 사용하여 달성:

으아악 으아악

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

으아악 으아악
P粉823268006

을 확인해 보세요.

두 개의 다른 컨테이너를 사용해야 합니다. 하나는 배경 이미지용이고 다른 하나는 콘텐츠용입니다.

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

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

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