배경 이미지에 CSS 필터를 적용하는 방법
P粉675258598
P粉675258598 2023-08-23 14:06:46
0
2
392

검색 페이지의 배경 이미지로 사용하는 JPEG 파일이 있고 Backbone.js 컨텍스트에서 작업 중이므로 CSS를 사용하여 설정하고 있습니다.

배경 이미지: url("whatever.jpg");

CSS 3 흐림 필터를 배경에만 적용하고 싶지만 해당 요소에만 스타일을 적용하는 방법을 잘 모르겠습니다. 시도하면:

-webkit-filter: Blur(5px); -moz-filter: 흐림(5px); -o-filter: 흐림(5px); -ms-필터: 흐림(5px); 필터: 흐림(5px);

내 CSS의 배경 이미지 바로 아래에는 배경뿐만 아니라 전체 페이지의 스타일이 지정됩니다. 이미지를 선택하고 필터를 적용하는 방법이 있나요? 또는 페이지의 다른 모든 요소에 대해 흐림 효과를 끄는 방법이 있습니까?

P粉675258598
P粉675258598

모든 응답 (2)
P粉521697419

다른 솔루션처럼 고정/절대적이지 않고 콘텐츠를 문서의 흐름에 맞추면서 추가 요소가 필요하지 않습니다.

구현 사용

으아악 으아악

편집가장자리의 흰색 테두리를 제거하려면 너비와 높이에110%를 사용하고 왼쪽과 위쪽 %에 代码>-5를 사용하세요. 이렇게 하면 배경이 약간 확대되지만 가장자리를 통해 단색이 번져서는 안 됩니다. 제안해 주신 Chad Fawcett에게 감사드립니다.

으아악 으아악
    P粉316423089

    이것 좀 보세요.

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

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

    둘 다position:fixedleft:0;右:0;。显示它们的差异来自于为元素设置不同的z-index값으로 배치됩니다.

    으아아아 으아아아
      최신 다운로드
      더>
      웹 효과
      웹사이트 소스 코드
      웹사이트 자료
      프론트엔드 템플릿
      회사 소개 부인 성명 Sitemap
      PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!