검색 페이지의 배경 이미지로 사용하는 JPEG 파일이 있고 Backbone.js 컨텍스트에서 작업 중이므로 CSS를 사용하여 설정하고 있습니다.
배경 이미지: url("whatever.jpg");
CSS 3 흐림 필터를 배경에만 적용하고 싶지만 해당 요소에만 스타일을 적용하는 방법을 잘 모르겠습니다. 시도하면:
-webkit-filter: Blur(5px); -moz-filter: 흐림(5px); -o-filter: 흐림(5px); -ms-필터: 흐림(5px); 필터: 흐림(5px);
내 CSS의 배경 이미지
바로 아래에는 배경뿐만 아니라 전체 페이지의 스타일이 지정됩니다. 이미지를 선택하고 필터를 적용하는 방법이 있나요? 또는 페이지의 다른 모든 요소에 대해 흐림 효과를 끄는 방법이 있습니까?
펜
다른 솔루션처럼 고정/절대적이지 않고 콘텐츠를 문서의 흐름에 맞추면서 추가 요소가 필요하지 않습니다.
구현 사용
편집가장자리의 흰색 테두리를 제거하려면 너비와 높이에
110%
를 사용하고 왼쪽과 위쪽 %에 代码>-5를 사용하세요. 이렇게 하면 배경이 약간 확대되지만 가장자리를 통해 단색이 번져서는 안 됩니다. 제안해 주신 Chad Fawcett에게 감사드립니다.
이것 좀 보세요펜.
두 개의 서로 다른 컨테이너를 사용해야 합니다. 하나는 배경 이미지용이고 다른 하나는 콘텐츠용입니다.
이 예에서는
.background-image
和.content
라는 두 개의 컨테이너를 만들었습니다.둘 다
position:fixed
和left:0;右:0;
。显示它们的差异来自于为元素设置不同的z-index
값으로 배치됩니다.