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


467

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


2
이미지의 일부만 흐리게 처리 : codepen.io/vsync/pen/gjMEWm
vsync

답변:


528

펜을 확인하십시오 .

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

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


79
이를 수행하는 약간 더 좋은 방법은 여분의 "배경 이미지"마크 업 대신 .content : before를 사용하는 것입니다. 여기 펜을 업데이트했습니다 : codepen.io/akademy/pen/FlkzB
Matthew Wilcoxson

6
그러나 웹킷 만이이 기능을 구현했으며 공급 업체 접두사 만 있으므로 ms-, o-, moz- 접두사는 쓸모가 없습니다.
Jon z

2
그것은 파이어 폭스 35.0에서 지원하고 나중에 기본적으로있어 : caniuse.com/#feat=css-filters
미코 Rantalainen

1
JUFF FF 35로 업데이트되었으며 접두사없이 작동합니다
Aamir Mahmood

1
@EdwardBlack 문제가 아니라 영구적 인 흐림 효과가 있다고 생각하면 이미지 편집 도구를 사용해야합니다. 다른 방법은 phantomJS / headless 웹킷 브라우저를 사용하여 일종의 이미지 캡처를 한 다음 제공하는 것이지만 동일한 결과를 얻는 지루한 방법입니다.
Aniket

70

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

사용하여 달성

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


1
이것의 한계는 js에서 의사 요소를 조작 할 수 없다는 것입니다. 필요하지 않으면 해결하는 것이 좋습니다.
posit labs

6
당신이 흐리게 흰색 테두리가 마음에 들지 않으면 당신은 증가시킬 수 widthheight대상을 110%한 다음 오프셋을 추가 -5%topleftcontent:before클래스입니다.
Chad Fawcett

1
그것은 나를 위해 일하고 있지만 사용자가 페이지를 스크롤 할 때 배경 이미지도 스크롤되기를 원합니다. FIXED 위치가 멈추고 있습니다. 이 문제를 해결하는 방법?
DEEPAN KUMAR

61

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

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

당신은 또한 사용할 수 있습니다 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모든 크롬 플랫폼에서 구현되는 것에 매우 가깝다는 것을 의미 합니다.


5
모든 브라우저에서 작동하지 않더라도이를 수행하기 위해 올바른 올바른 해킹 방법을 제공한다는 표를 얻었습니다.
MrMesees

AFAIK이 기능은 비표준 기능이므로 사양이 없습니다.
Vitim.us

3
머리 위로! 2018 년에는 브라우저 지원이 크게 줄었습니다! Edge, Firefox 또는 Chrome에서는 지원되지 않습니다.
protoEvangelion

@protoEvangelion Edge 16 이상에서 사용할 수있는 것으로 보이며 다른 브라우저는이를 구현하지 않는다고 말합니다. 이러한 주장을 뒷받침 할 사실이 있습니까?
hitautodestruct

@hitautodestruct caniuse.com IE에 따르면 Edge 16, Firefox 및 Chrome은 현재 기본적으로 이것을 지원하지 않습니다. Edge 17+가이를 지원합니다. 지적 해 주셔서 감사합니다. 멋진 답변이지만, 브라우저가 이것을 구현하기를 바랍니다. :)
protoEvangelion

26

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


6

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

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


5

다음은 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 */
}

그것은 나를 위해 작동하지 않습니다. 작동하는 jsfiddle이 있습니까?
Matt

2

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


1

언급 된 모든 솔루션이 매우 영리하지만 모든 요소를 ​​시도했을 때 사소한 문제가 있거나 페이지의 다른 요소에 영향을 줄 수있는 것으로 보입니다.

결국 시간을 절약하기 위해 단순히 이전 솔루션으로 돌아갔습니다. Paint.NET을 사용 하고 반경 5-10 픽셀의 Gaussian Blur 인 Effects로 이동하여 페이지 이미지로 저장했습니다. :-)

HTML :

<body class="mainbody">
</body

CSS :

body.mainbody
{
    background: url('../images/myphoto.blurred.png');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}

편집하다:

나는 마침내 그것을 작동 시켰지만 해결책은 결코 간단하지 않습니다! 여기를 봐:


2 개의 imgs를 다운로드
Ced

1

실제로 필요한 것은 "필터"입니다.

blurWhatEverYouWantInPixels»);"

body {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
}

#background {
    background-image: url('https://cdn2.geckoandfly.com/wp-content/uploads/2018/03/ios-11-3840x2160-4k-5k-beach-ocean-13655.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    /* START */
    /* START */
    /* START */
    /* START */

    /* You can adjust the blur-radius as you'd like */
    filter: blur(3px);
}
<div id="background"></div>

<p id="randomContent">Lorem Ipsum</p>


1

물론 이것은 CSS 솔루션은 아니지만 다음과 함께 CDN Proton을 사용할 수 있습니다 filter.

body {
    background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}

https://developer.wordpress.com/docs/photon/api/#filter 에서 온 것입니다.


localhost테스트하는 동안 이 작업을 수행 하는 매끄러운 방법이 있습니까?
Jonathan

큰 해상도 이미지의 블러 양이 너무 미묘합니다. 블러킹을 보지 않고 블러 양을 크게 늘리려면 어떻게해야합니까? 너비가 약간 도움이되지만 너무 흐리게하면 너무 흐릿 해 보입니다.
Jonathan

0

나는 이것을 쓰지 않았지만 backdrop-filterCSS SASS 컴파일러를 사용하여 부분적으로 지원되는 polyfill이 있음을 알았 으므로 컴파일 파이프 라인이 있으면 훌륭하게 얻을 수 있습니다 (TypeScript도 사용).

https://codepen.io/mixal_bl4/pen/EwPMWo


0

div {
    background: inherit;
    width: 250px;
    height: 350px;
    position: absolute;
    overflow: hidden;  /* Adding overflow hidden */
}

div:before {
    content: ‘’;
    width: 300px;
    height: 400px;
    background: inherit;
    position: absolute;
    left: -25px;  /* Giving minus -25px left position */
    right: 0;
    top: -25px;   /* Giving minus -25px top position */
    bottom: 0;
    box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.3);
    filter: blur(10px);
}


0

이 답변은 동적 높이와 이미지 가있는 머티리얼 디자인 가로 카드 레이아웃입니다.

카드의 동적 높이로 인한 이미지 왜곡을 방지하기 위해 흐림이있는 배경 자리 표시 자 이미지를 사용하여 높이 변화를 조정할 수 있습니다.

 

설명

  • 이 카드는 flexbox 인 <div>with with wrapper에 포함되어 있습니다.
  • 이 카드는 링크이기도 한 이미지와 내용의 두 가지 요소로 구성됩니다.
  • 링크 <a>, 클래스 링크상대적으로 배치 됩니다.
  • 링크는 플레이스 홀더 <div>클래스 블러<img>클래스 그림 의 두 가지 하위 요소로 구성됩니다. 선명한 이미지 인 .
  • 모두 위치 절대 하고 있습니다 width: 100%만, 클래스 그림은 높은 스택 순서, 즉,이 z-index: 2자리 표시 자 이상을 배치합니다.
  • 흐릿한 자리 표시 자의 배경 이미지 는 HTML에서 인라인 스타일 을 통해 설정됩니다 .

 

암호

.wrapper {
  display: flex;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23);
  background-color: #fff;
  margin: 1rem auto;
  height: auto;
}

.wrapper:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.link {
  display: block;
  width: 200px;
  height: auto;
  overflow: hidden;
  position: relative;
  border-right: 2px solid #ddd;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.pic {
  width: calc(100% - 20px);
  max-width: 100%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.pic:hover {
  transition: all 0.2s ease-out;
  transform: scale(1.1);
  text-decoration: none;
  border: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: 20px;
  overflow-x: hidden;
}

.text {
  margin: 0;
}
<div class="wrapper">
  <a href="#" class="link">
    <div class="blur" style="background: url('http://www.planwallpaper.com/static/assets/img/header.jpg') 50% 50% / cover;"></div>
    <img src="http://www.planwallpaper.com/static/assets/img/header.jpg" alt="Title" class="pic" />
  </a>

  <div class="content">
    <p class="text">Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste
      eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt. </p>
  </div>
</div>


0

이제 CSS GRID를 사용하여 더욱 간단하고 유연 해집니다. 흐릿한 배경 (imgbg)을 텍스트 (h2)와 겹치면됩니다.

<div class="container">
 <div class="imgbg"></div>
 <h2>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
  aut rerum mollitia quas voluptas delectus facere magni cum unde?:)
 </h2>
</div>

그리고 CSS :

.container {
        display: grid;
        width: 30em;
      }

.imgbg {
        background: url(bg3.jpg) no-repeat center;
        background-size: cover;
        grid-column: 1/-1;
        grid-row: 1/-1;
        filter: blur(4px);
      }


     .container h2 {
        text-transform: uppercase;
        grid-column: 1/-1;
        grid-row: 1/-1;
        z-index: 2;
      }

0
$fondo: url(/grid/assets/img/backimage.png);    
{ padding: 0; margin: 0; } 
body { 
    ::before{
        content:"" ; height: 1008px; width: 100%; display: flex; position: absolute; 
        background-image: $fondo ; background-repeat: no-repeat ; background-position: 
        center; background-size: cover; filter: blur(1.6rem);
    }
}

1
답변에 설명을 추가하는 것이 좋습니다.
Arvind Maurya

오순절 Sass 다음 코드를 넣고 본문에 모든 항목을 그렸습니다. 본문 배경에만 이미지를 표시하는 데 도움을 요청할 수 있습니다. $ fondo : url (/grid/assets/img/backimage.png); {패딩 : 0; 여백 : 0; } body {:: before {content : ""; 높이 : 1008px; 폭 : 100 %; 디스플레이 : 플렉스; 위치 : 절대; 배경 이미지 : $ fondo; 배경 반복 : 반복 없음; 배경 위치 : 중심; 배경 크기 : 덮개; 필터 : 흐림 (1.6rem); }}
Carlos Boyzo

0

의사 클래스 사용하지 않고

body{
    background:#cecece;
    font-family: "Scope One", serif;
    font-size: 12px;
    color:black;
    margin:0 auto;
    height:100%;
    width:100%;
    background-image: 
       linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.81)), 
        url(https://i.imgur.com/2rRMQh7.jpg);
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
}
<body></body>


-6

컨텐츠를 스크롤 가능하게하려면 컨텐츠의 위치를 ​​절대로 설정하십시오.

content {
   position: absolute;
   ...
}

이것이 나만을위한 것인지는 모르겠지만 그렇지 않은 경우에는 해결책입니다!

또한 배경이 고정되어 있기 때문에 "시차" 효과가 있습니다! 이제이 사람이 흐릿한 배경을 만드는 법을 가르쳐 줄뿐만 아니라 시차 배경 효과이기도합니다!


4
질문에 대답하지 않습니다
고른
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.