[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내 CSS, 그것은 스타일 전체 페이지,보다는 배경. 이미지 만 선택하고 필터를 적용하는 방법이 있습니까? 또는 페이지의 다른 모든 요소에 대해 흐림 효과를 끄는 방법이 있습니까?

답변

이 펜을 확인하십시오 .

배경 이미지 용과 콘텐츠 용의 두 가지 컨테이너를 사용해야합니다.

예, 나는 두 개의 컨테이너를 생성 한 .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 Text에 대한 사과 .

최신 정보

http://codepen.io/akademy/pen/FlkzB를 사용한 더 나은 구현을위한 Matthew Wilcoxson 에게 감사합니다.content:before

답변

펜

다른 솔루션과 같이 고정 / 절대적이지 않고 문서 흐름에 내용을 맞추는 동시에 추가 요소에 대한 필요성을 폐지합니다.

사용하여 달성

.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%왼쪽과 위쪽을 사용하십시오 -5%. 이렇게하면 배경이 약간 커지지 만 가장자리에서 단색 번짐이 없어야합니다.

여기에 업데이트 된 펜 : https://codepen.io/anon/pen/QgyewB- 제안 주셔서 감사합니다 Chad Fawcett.

답변

다른 답변에서 언급했듯이 이것은 다음과 같이 달성 할 수 있습니다.

흐린 이미지를 배경으로 복사합니다.
필터링 한 후 컨텐츠 뒤에 배치 할 수있는 의사 요소입니다.

당신은 또한 사용할 수 있습니다 `backdrop-filter`

지원되는 속성 backdrop-filter이 있으며 현재 Chrome 76, Edge , Safari 및 iOS Safari 에서 지원됩니다 ( 통계 는 caniuse.com 참조 ).

에서 모질라 devdocs :

백 드롭 필터 속성은 요소 뒤의 영역을 흐리게하거나 색상을 이동시키는 것과 같은 효과를 제공하며, 요소의 투명도 / 불투명도를 조정하여 해당 요소를 통해 볼 수 있습니다.

사용 통계는 caniuse.com 을 참조하십시오 .

다음과 같이 사용하십시오.

.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>

스 니펫 확장

업데이트 (2019년 12월 6일) :과 크롬이 출시 될 예정 backdrop-filter버전 76에서 기본적으로 사용 으로 인해 밖으로 30/07/2019입니다 .

업데이트 (01/06/2019) : Mozzilla Firefox 팀 은 곧 구현을 시작할 것이라고 발표 했습니다.

업데이트 (21/05/2019) : 방금 발표 한 Chromium backdrop-filter은 “실험 웹 플랫폼 기능 사용”플래그를 사용하지 않고 크롬 카나리아로 제공됩니다. 이것은 backdrop-filter모든 크롬 플랫폼에서 구현되는 것에 매우 가깝다는 것을 의미 합니다.

답변

이렇게하려면 HTML 을 재구성 해야합니다. 배경을 흐리게하려면 전체 요소를 흐리게해야합니다. 따라서 배경 만 흐리게하려면 자체 요소 여야합니다.

답변

아래 코드를 확인하십시오 :-

.backgroundImageCVR{
	position:relative;
	padding:15px;
}
.background-image{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg');
	background-size:cover;
	z-index:1;
	-webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}
.content{
	position:relative;
	z-index:2;
	color:#fff;
}

<div class="backgroundImageCVR">
    <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>
</div>

스 니펫 확장

답변

다음은 Matthew Wilcoxson의 솔루션과 같이 ‘이전’의사 요소가있는 순수 CSS의 최신 브라우저를위한 간단한 솔루션입니다.

JavaScript에서 이미지 및 기타 속성을 변경하기 위해 의사 요소에 액세스 할 필요가 없도록하려면 inherit값으로 사용 하고 상위 요소 (여기서는 body) 를 통해 액세스하십시오 .

body::before {
    content: ""; /* Important */
    z-index: -1; /* Important */
    position: inherit;
    left: inherit;
    top: inherit;
    width: inherit;
    height: inherit;
    background-image: inherit;
    background-size: cover;
    filter: blur(8px);
}

body {
  background-image: url("xyz.jpg");
  background-size: 0 0;  /* Image should not be drawn here */
  width: 100%;
  height: 100%;
  position: fixed; /* Or absolute for scrollable backgrounds */
}

답변

.contentCSS 의 탭에서로 변경하십시오 position:absolute. 그렇지 않으면 렌더링 된 페이지를 스크롤 할 수 없습니다.

css

답변

최신 정보

답변

답변

당신은 또한 사용할 수 있습니다 backdrop-filter

답변

답변

답변

답변

당신은 또한 사용할 수 있습니다 `backdrop-filter`