programing

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

i4 2023. 8. 29. 20:08
반응형

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>

로렘 입섬 문자에 대해 사과드립니다.

갱신하다

Matthew Wilcoxson이 다음을 사용하여 더 나은 구현을 제공해 주셔서 감사합니다..content::before https://codepen.io/akademy/pen/://codepen.io/akademy/pen/FlkzB

펜

추가 요소의 필요성을 없애고 다른 솔루션처럼 고정/절대적인 내용이 아닌 문서 흐름에 맞도록 합니다.

다음을 사용하여 달성

.content {
  /* this is needed or the background will be offset by a few pixels at the top */
  overflow: auto;
  position: relative;
}

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

  display: block;
  background-image: url('https://i.imgur.com/lL6tQfy.png');
  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);
}
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

EDIT 가장자리의 흰색 테두리를 제거하려면 너비와 높이를 사용합니다.110%그리고 왼쪽과 맨 위.-5%이것은 당신의 배경을 약간 넓힐 것입니다. 하지만 가장자리에서 단색의 출혈이 없어야 합니다.Chad Fawcett의 제안에 감사드립니다.

.content {
  /* this is needed or the background will be offset by a few pixels at the top */
  overflow: auto;
  position: relative;
}

.content::before {
  content: "";
  position: fixed;
  top: -5%;
  left: -5%;
  right: -5%;
  z-index: -1;

  display: block;
  background-image: url('https://i.imgur.com/lL6tQfy.png');
  background-size:cover;
  width: 110%;
  height: 110%;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

다른 답변에 명시된 것처럼 다음을 통해 이를 달성할 수 있습니다.

  • 배경으로 흐릿해진 이미지의 복사본입니다.
  • 필터링한 후 내용 뒤에 배치할 수 있는 유사 요소입니다.

사용할 수도 있습니다.

되는 속성인 같있속다습니성이는원되지다음은과▁called다▁there▁a▁property▁supported라는 속성이 있습니다.backdrop-filter현재 Chrome, Firefox, Edge, Safari 및 iOS Safari에서 지원됩니다(통계는 caniuse.com 참조).

Mozilla devdocs에서:

배경 필터 속성은 요소 뒤의 영역을 흐리거나 색이 이동하는 등의 효과를 제공하며, 요소의 투명도/불투명도를 조정하여 해당 요소를 통해 볼 수 있습니다.

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

당신은 그렇게 사용할 것입니다., 클래스 내부내흐려지않유사클용다니합를래스티틸리면으를 하세요..u-non-blurred

.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%;
  top: 0;
}

.background-filter {
  position: relative;
}

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

/* Use for content that should not be blurred */
.u-non-blurred {
  position: relative;
  z-index: 1;
}
<div class="background background-filter"></div>
<div class="background background-filter">
  <h1 class="u-non-blurred">Kermit D. Frog</h1>
</div>

이 작업을 수행하려면 HTML을 재구성해야 합니다.배경을 흐리게 하려면 전체 요소를 흐리게 해야 합니다.따라서 배경만 흐리게 하려면 배경 자체의 요소가 있어야 합니다.

다음은 매튜 윌콕슨의 솔루션처럼 '이전' 유사 요소를 가진 순수 CSS의 최신 브라우저를 위한 간단한 솔루션입니다.

JavaScript에서 및 를 피하기 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 */
}

아래 코드 확인 부탁드립니다:-

.backgroundImageCVR{
    position:relative;
    padding:15px;
}
.background-image{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:url('https://i.imgur.com/5SZI6qZ.jpeg');
    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>

.content을 CSS로 합니다.position:absolute그렇지 않으면 렌더링된 페이지를 스크롤할 수 없습니다.

사양에는 다음과 같은 배경 이미지와 함께 사용할 수 있는 새로운 기능이 도입되었습니다.

background: filter(url("whatever.jpg"), blur(5px));

그<filter()>함수에는 두 개의 인수가 사용됩니다. 번째 는 첫번인는다같습다니과음입니다.<image>두 번째는 CSS 필터 속성에 지정된 필터 함수 목록입니다.함수는 매개 변수를 사용하여 필터 규칙을 적용하여 처리 이미지를 반환합니다.

그러나 이에 대한 브라우저 지원은 없습니다. https://caniuse.com/css-filter-function .지금은 Safari에서만 테스트가 가능합니다.

언급된 모든 솔루션이 매우 영리하지만, 제가 시도해 본 페이지의 다른 요소들과 사소한 문제나 잠재적인 노크 효과가 있는 것 같습니다.

결국 시간을 절약하기 위해 이전 솔루션으로 되돌아갔습니다.페인트를 사용했습니다.NET 그리고 반경 5~10 픽셀의 효과, 가우스 블러로 가서 방금 그것을 페이지 이미지로 저장했습니다. :-)

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(«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>

, 과 함께 Proton을 할 수 .filter:

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

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

이것은 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;
      }

CSS 그리드가 제가 이해하기 더 쉽습니다. :)

html, body {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  
  display: grid;
  grid-template-columns: 1fr 6fr 1fr;
  grid-template-rows: 1fr 6fr 1fr;
  grid-template-areas: 
  '. . .'
  '. content .'
  '. . .'; 
  justify-content: center;
  align-items: center;
}

.backbround {
  width: 100%;
  height: 100%;
  
  grid-area: 1/1/5/5;
  
  background-image: url(https://i.imgur.com/aUhpEz3.jpg);
  filter: blur(5px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.content {
  height: 200px;
  position: relative;
  
  grid-area: content;
  display: flex;
  
  justify-content: center;
  align-items: center;
  color: white;
}
<div class="container">
  <div class="backbround"></div>
  <div class="content"><h1>Hello World</h1></div>
</div>

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

<!-- Q:Create the blur on parenttal div without effecting the child div -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0; padding: 0; box-sizing: border-box;
        font-size: 30px;
    }
    .parent{
background-image:url(hobby.jpg) ;
height: 100vh;
width: 100vw;
background-repeat: no-repeat;
background-size: cover;
background-position: center;

display: flex;
justify-content: center;
align-items: center;
    }
    .child{
   
    height: 90vh;
    width: 90vw;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.418);
  justify-content: center;
  align-items: center;
    display: flex;
    
 
    }
  .text{
    
      height: 300px;
      width: 300px;
      border-radius: 500px;
      background-image: url(50cf380e5c78eb174faa8e6ac2cb654a.jpg);
      background-size: cover;
      background-position: center;
      

  }
    
    
</style>
<body>
    <div class="parent">
        <div class="child">
       <div class="text"></div>
        </div>
    </div>
</body>
</html>

이 대답은 동적 높이와 이미지가 있는 재료 설계 수평 카드 레이아웃에 대한 것입니다.

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

 

설명.

  • 카드는 다음에 포함되어 있습니다.<div>플렉스박스인 클래스 래퍼와 함께.
  • 카드는 링크이기도 한 이미지와 콘텐츠라는 두 가지 요소로 구성되어 있습니다.
  • 링크<a>클래스 링크, 상대적으로 배치됩니다.
  • 링크는 자리 표시자인 두 개의 하위 요소로 구성됩니다.<div>수업의 흐림과 an<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('https://i.imgur.com/5SZI6qZ.jpeg') 50% 50% / cover;"></div>
    <img src="https://i.imgur.com/5SZI6qZ.jpeg" 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>

제가 작성한 것은 아니지만 부분적으로 지원되는 폴리필이 있다는 것을 알게 되었습니다.backdrop-filterCSSSAS 컴파일러를 사용하므로 컴파일 파이프라인이 있으면 쉽게 달성할 수 있습니다(TypeScript도 사용).

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

의 유사 클래스를 사용하지 않고

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>

하고자 하는 하여 사용할 수 .backdrop-filterCSS 클래스로 이동합니다.이 링크를 확인하십시오.

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

배경 이미지를 성공적으로 적용하기 위한 단계

  1. 태그 "html"을 사용하여 <link rel="stylesheet" ref="yourcssdocument.css">

  2. 상대 디렉토리와 하위 디렉토리에 대해 잘 모르기 때문에 언급할 수 없습니다.

  3. 나에게 가장 효과적인 방법은 css의 URL 링크를 사용했을 때입니다.

#yourcssdoc .image {
   background-image: url("paste your link here with the quotations")
}

콘텐츠를 스크롤 가능하게 하려면 콘텐츠 위치를 절대로 설정합니다.

content {
   position: absolute;
   ...
}

이것이 나만을 위한 것이었는지는 모르겠지만, 그렇지 않다면 그것이 해결책입니다!

또한 배경이 고정되어 있기 때문에, 이것은 여러분이 "패럴랙스" 효과를 가지고 있다는 것을 의미합니다!그래서 이제, 이 사람은 여러분에게 흐릿한 배경을 만드는 방법을 가르쳐 줄 뿐만 아니라, 시차 배경 효과이기도 합니다!

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

반응형

'programing' 카테고리의 다른 글

intptr_t 및 uninttr_t의 문자열 형식  (0) 2023.08.29
잘못된 요청 활동 결과 코드 입력  (0) 2023.08.29
PowerShell 패키지 관리, 패키지 공급자를 제거하는 방법은 무엇입니까?  (0) 2023.08.29
VBA - 모델이 없는 UserForm 인스턴스를 제대로 제거합니다.  (0) 2023.08.24
Oracle 패키지가 유효하지 않게 되는 상황은 무엇입니까?  (0) 2023.08.24

'programing'의 다른글

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

관련글

댓글

티스토리툴바