배경 이미지에 CSS 필터를 적용하는 방법

질문 : 배경 이미지에 CSS 필터를 적용하는 방법

---

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

background-image: url("whatever.jpg");

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

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

background-image 바로 아래에서 배경이 아닌 전체 페이지의 스타일을 지정합니다. 이미지 만 선택하고 여기에 필터를 적용하는 방법이 있습니까? 또는 페이지의 다른 모든 요소에 대해 블러를 끄는 방법이 있습니까?

답변

---

이 펜을 확인하십시오.

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

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

둘 다 position: fixed 및 left: 0; right: 0; . 표시의 차이는 요소에 대해 다르게 설정된 z-index

 

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url('https://i.imgur.com/lL6tQfy.png');
  width: 1200px;
  height: 800px;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  margin-left: 20px;
  margin-right: 20px;
}

<div class="background-image"></div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend
    rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing,
    quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
  <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum
    tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
</div>

lorem ipsum 텍스트에 대해 사과드립니다.

.content::before https://codepen.io/akademy/pen/FlkzB를 사용하여 더 나은 구현을 해준 Matthew Wilcoxson 에게 감사드립니다.

출처 : https://stackoverflow.com/questions/20039765/how-to-apply-a-css-filter-to-a-background-image