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

Question

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

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 내 CSS에서는 배경만이 아닌 전체 페이지의 스타일을 지정합니다.이미지만 선택하고 필터를 적용하는 방법이 있나요?아니면 페이지의 다른 모든 요소에 대해 흐림 효과를 끄는 방법이 있나요?

Answer 1

이 펜 .

두 개의 다른 컨테이너를 사용해야하며, 하나는 배경 이미지와 콘텐츠에 대해 하나씩 사용해야합니다.

예제에서는 두 개의 컨테이너, .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('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
  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 텍스트에 대한 사과 사과드립니다.

업데이트

Matthew Wilcoxson http://codepen.io/akademy/pen/flkzb

Answer 2

펜

여분의 요소에 대한 필요성을 폐지하는 것과 함께 다른 솔루션과 같이 고정 / 절대치가 아니라 문서 흐름 내에 컨텐츠를 끼워 넣는 것입니다.

를 사용하여 달성 된

.content {
  overflow: auto;
  position: relative;
}

.

오버플로 자동이 필요합니다. 그렇지 않으면 백그라운드가 상단에 몇 픽셀로 오프셋됩니다.

이후에 당신은 단순히

가 필요합니다.

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('img-here');
  background-size:cover;
  width: 100%;
  height: 100%;

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

.

편집 가장자리에서 흰색 테두리를 제거하는 데 관심이 있으시면 110%의 너비와 높이와 왼쪽 및 왼쪽 상단을 사용하십시오.이것은 당신의 배경을 tad를 확대 할 것입니다 - 그러나 가장자리에서 단색의 색 출혈이 없어야합니다.

업데이트 된 펜 여기에서 : https://codepen.io/anon/pen/qgyewb -Chad Fawcett에게 제안을 위해 감사합니다.

Answer 3

다른 대답에 명시된대로 이것은 다음과 같이 달성 할 수 있습니다 :

• 배경으로 흐리게 이미지의 사본.
• 필터링 할 수있는 의사 요소는 콘텐츠 뒤에 배치됩니다.

또한 backdrop-filter backdrop-filter라는 지원되는 속성이 있으며 현재 Chrome 76에서 지원, Edge , Safari 및 iOS Safari ( relinchapdrop-filter"> Caniuse.com/A>)

Mozilla DevDocs :

BACKDROP-FILTER 속성은 요소의 투명도 / 불투명도를 조정하여 요소의 투명도 / 불투명도를 조정하여 요소를 통해 볼 수있는 요소 뒤의 영역을 흐리게 또는 색상을 이동하는 것과 같은 효과를 제공합니다.

사용 중지 통계를 위해 counciuse.com/A>

다음과 같이 사용할 것입니다 :

.background-filter::after {
  -webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
  backdrop-filter: blur(5px); /* Supported in Chrome 76 */

  content: "";
  display: block;
  position: absolute;
  width: 100%; height: 100%;
}

.background-filter {
  position: relative;
}

.background {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
  width: 200px;
  height: 200px;
}

.

<div class="background background-filter"></div>

.

update (12/06/2019) : Chromium은 backdrop-filter를 사용하도록 설정합니다. rel="noreferrer">는 30/07/2019 가 며졌습니다.

update (01/06/2019) : Mozzilla Firefox 팀 는 곧이 구현을 시작할 때 시작할

update (21/05/2019) : 크롬 backdrop-filter는 "실험 웹 플랫폼 기능을 활성화하지 않고 Chrome 카나리아에서 사용할 수 있습니다. 이는 backdrop-filter가 모든 크롬 플랫폼에서 구현되는 것과 매우 가깝습니다.