development

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

big-blog 2020. 2. 17. 22:18

배경 이미지에 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('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 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. 그렇지 않으면 렌더링 된 페이지를 스크롤 할 수 없습니다.

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

결국 시간을 절약하기 위해 단순히 이전 솔루션으로 돌아갔습니다. 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;
}

편집하다:

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

필터 : blur (1px); 파이어 폭스, IE 및 오페라에서 작동하지 않습니다

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

blur(«WhatEverYouWantInPixels»);"

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>

물론 이것은 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 에서 온 것입니다.

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

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

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);
}

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

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

설명

이 카드는 flexbox 인 <div>with 클래스 래퍼에 포함되어 있습니다.
이 카드는 링크이기도 한 이미지와 내용의 두 가지 요소로 구성됩니다.
링크 <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>

이제 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;
      }

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

content {
   position: absolute;
   ...
}

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

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

참고 URL : https://stackoverflow.com/questions/20039765/how-to-apply-a-css-filter-to-a-background-image

도와주세요.

'development' 카테고리의 다른 글

Docker 컨테이너의 런타임 성능 비용은 얼마입니까? (0)	2020.02.17
데이터베이스에 비밀번호를 저장하는 가장 좋은 방법 (0)	2020.02.17
Turing Complete 란 무엇입니까? (0)	2020.02.16
파일의 특정 줄에 대한 커밋 로그를 검색 하시겠습니까? (0)	2020.02.16
Ruby에서 include와 require의 차이점은 무엇입니까? (0)	2020.02.16

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

big-blog

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

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

최신 정보

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

설명

암호

'development' 카테고리의 다른 글

'development'의 다른글

티스토리툴바

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

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

최신 정보

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

설명

암호

'development' 카테고리의 다른 글

'development'의 다른글

관련글

티스토리툴바

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