Jak zastosować filtr CSS do obrazu tła


467

Mam plik JPEG, którego używam jako obraz tła dla strony wyszukiwania, i używam CSS, aby go ustawić, ponieważ pracuję w kontekstach Backbone.js :

background-image: url("whatever.jpg");

Chcę zastosować filtr rozmycia CSS 3 tylko do tła, ale nie jestem pewien, jak stylizować tylko ten jeden element. Jeśli spróbuję:

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

tuż pod background-imagemoim CSS, stylizuje całą stronę, a nie tylko tło. Czy istnieje sposób, aby wybrać tylko obraz i zastosować do niego filtr? Alternatywnie, czy istnieje sposób, aby po prostu wyłączyć rozmycie dla każdego innego elementu na stronie?


Odpowiedzi:


528

Sprawdź ten długopis .

Będziesz musiał użyć dwóch różnych pojemników, jednego na obraz tła, a drugiego na zawartość.

W tym przykładzie utworzyłem dwa kontenery .background-imagei .content.

Oba są umieszczone przy pomocy position: fixedi left: 0; right: 0;. Różnica w ich wyświetlaniu wynika z z-indexwartości, które zostały ustawione inaczej dla elementów.

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

Przepraszamy za tekst Lorem Ipsum .

Aktualizacja

Podziękowania dla Matthew Wilcoxson za lepszą implementację przy użyciu .content:before http://codepen.io/akademy/pen/FlkzB


79
Nieco lepszym sposobem na to jest użycie .content: przed zamiast dodatkowego znacznika „obraz w tle”. Zaktualizowałem pióro tutaj: codepen.io/akademy/pen/FlkzB
Matthew Wilcoxson

6
fwiw, tylko Webkit zaimplementował tę funkcję, i tam tylko z prefiksem dostawcy, więc prefiksy ms-, o-, moz- są bezużyteczne.
Jon z

2
Jest domyślnie obsługiwany w przeglądarce Firefox 35.0 i nowszych: caniuse.com/#feat=css-filters
Mikko Rantalainen,

1
Zaktualizowano JUst do FF 35 i działa bez prefiksu
Aamir Mahmood

1
@EdwardBlack Nie sądzę, że to problem, ale aby mieć trwałe rozmycie, będziesz musiał skorzystać z narzędzi do edycji obrazu. Innym sposobem może być przechwycenie obrazu za pomocą przeglądarki phantomJS / headless webkit, a następnie podanie go, ale jest to żmudny sposób na osiągnięcie tego samego rezultatu.
Aniket,

70

długopis

Zniesienie potrzeby stosowania dodatkowego elementu, wraz z dopasowaniem zawartości do przepływu dokumentu, a nie ustaleniem / absolutem, jak w przypadku innych rozwiązań.

Osiągnięty przy użyciu

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

Automatyczna funkcja przepełnienia jest wymagana, w przeciwnym razie tło zostanie przesunięte o kilka pikseli u góry.

Po tym po prostu potrzebujesz

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

EDYCJA Jeśli chcesz usunąć białe obramowania z krawędzi, użyj szerokości i wysokości 110%oraz lewej i górnej krawędzi -5%. Powoduje to nieznaczne powiększenie tła - ale nie powinno być żadnego jednolitego koloru krwawiącego z krawędzi.

Zaktualizowano pióro tutaj: https://codepen.io/anon/pen/QgyewB - Dziękuję Chad Fawcett za sugestię.


1
Ograniczeniem jest to, że nie można manipulować pseudo elementami w js. Jeśli nie musisz, to dobre rozwiązanie.
posit labs

6
Jeśli nie podoba ci się niewyraźne białe obramowanie, możesz zwiększyć widthi heightdo, 110%a następnie dodać przesunięcie -5%do topi leftz content:beforeklasy.
Chad Fawcett

1
Działa to dla mnie, ale chcę, aby obraz w tle również był przewijany, gdy użytkownik przewija stronę. Pozycja NAPRAWIONA to zatrzymuje. Jak pozbyć się tego problemu?
DEEPAN KUMAR

61

Jak stwierdzono w innych odpowiedziach, można to osiągnąć za pomocą:

  • Kopia zamazanego obrazu jako tła.
  • Pseudoelement, który można filtrować, a następnie umieszczać za treścią.

Możesz także użyć backdrop-filter

Istnieje obsługiwana właściwość o nazwie backdrop-filter, która jest obecnie obsługiwana w Chrome 76, Edge , Safari i iOS Safari ( statystyki - patrz caniuse.com ).

Od devdocs Mozilli :

Właściwość filtra tła zapewnia takie efekty, jak rozmycie lub przesunięcie koloru obszaru za elementem, które następnie można zobaczyć przez ten element, dostosowując przezroczystość / nieprzezroczystość elementu.

Zobacz caniuse.com dla statystyk użytkowania.

Użyłbyś go w ten sposób:

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

Aktualizacja (12.06.2019) : Chromium będzie dostarczane z backdrop-filterdomyślnie włączoną wersją 76, która ma się ukazać 30/07/2019 .

Aktualizacja (01.06.2019) : Zespół Mozzilla Firefox ogłosił, że wkrótce rozpocznie prace nad jego wdrożeniem.

Aktualizacja (21.05.2019) : Chromium, które właśnie ogłoszono, backdrop-filter jest dostępne na kanale Chrome bez włączania flagi „Włącz eksperymentalne funkcje platformy internetowej”. Oznacza to, że backdrop-filterjest bardzo blisko do wdrożenia na wszystkich platformach chrome.


5
Nawet jeśli to nie działa we wszystkich przeglądarkach, dostajesz mój głos za dostarczenie poprawnego sposobu niehakowania.
MrMesees

AFAIK jest to niestandardowa funkcja, więc nie ma na nią specyfikacji.
Vitim.us

3
HEADS-UP! W 2018 r. Znacznie spadła obsługa przeglądarki! Nieobsługiwane w Edge, Firefox ani Chrome.
protoEvangelion

@protoEvangelion Wygląda na to, że będzie dostępny w Edge 16+ i nie widzę żadnych innych przeglądarek, które twierdzą, że tego nie wdrożą. Jakieś fakty potwierdzające te roszczenia?
hitautodestruct

@hitautodestruct Według caniuse.com IE, Edge 16, Firefox i Chrome obecnie nie obsługują tego domyślnie. Masz rację, że Edge 17+ obsługuje to. Dzięki za zwrócenie na to uwagi.
Nawiasem mówiąc, fajna

26

Aby to zrobić, musisz zmienić strukturę HTML . Musisz zatrzeć cały element, aby zatrzeć tło. Więc jeśli chcesz rozmazać tylko tło, musi to być jego własny element.


6

Sprawdź poniższy kod: -

.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

Poniżej przedstawiono proste rozwiązanie dla współczesnych przeglądarek w czystym CSS z pseudoelementem „przed”, podobnie jak rozwiązanie Matthew Wilcoxson.

Aby uniknąć konieczności dostępu do pseudoelementu w celu zmiany obrazu i innych atrybutów w JavaScript, po prostu użyj inheritjako wartości i uzyskaj do nich dostęp za pośrednictwem elementu nadrzędnego (tutaj 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 */
}

To nie działa dla mnie. Czy masz działającego jsfiddle?
Matt

2

W .contentzakładce w CSS zmień to na position:absolute. W przeciwnym razie renderowana strona nie będzie przewijana.


1

Chociaż wszystkie wymienione rozwiązania są bardzo sprytne, wszystkie wydawały się mieć drobne problemy lub potencjalnie powodować efekt z innymi elementami na stronie, gdy je wypróbowałem.

W końcu, aby zaoszczędzić czas, po prostu wróciłem do mojego starego rozwiązania: użyłem Paint.NET i przeszedłem do Effects, Gaussian Blur o promieniu od 5 do 10 pikseli i właśnie zapisałem to jako obraz strony. :-)

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

EDYTOWAĆ:

W końcu udało mi się go uruchomić, ale rozwiązanie nie jest wcale proste! Spójrz tutaj:


pobierasz 2 zdjęcia
Ced

1

Wszystko czego potrzebujesz to „filtr”:

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

Oczywiście nie jest to rozwiązanie CSS, ale możesz użyć protonu CDN z filter:

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

Pochodzi z https://developer.wordpress.com/docs/photon/api/#filter


Czy są jakieś sprytne sposoby, aby sprawdziły się localhostpodczas testowania?
Jonathan

Stopień rozmycia dla obrazu o dużej rozdzielczości jest zbyt subtelny, jak mogę radykalnie zwiększyć stopień rozmycia, aby nie wyglądał na blokujący? Szerokość trochę pomaga, ale wygląda zbyt blokująco, jeśli za bardzo się rozmazuję
Jonathan

0

Nie napisałem tego, ale zauważyłem, że istnieje polifill dla częściowo obsługiwanego backdrop-filterprzy użyciu kompilatora CSS SASS, więc jeśli masz potok kompilacji, można go ładnie osiągnąć (używa również 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

Ta odpowiedź dotyczy projektu materiałowego poziomego układu kart z dynamiczną wysokością i obrazem.

Aby zapobiec zniekształceniom obrazu spowodowanym dynamiczną wysokością karty, możesz użyć zastępczego obrazu tła z rozmyciem, aby dostosować się do zmian wysokości.

 

Wyjaśnienie

  • Karta jest zawarty w <div>klasie owijki , który jest schematu flexbox.
  • Karta składa się z dwóch elementów: obrazu, który jest również linkiem i treści.
  • Łącze <a>, klasa łącza , jest umieszczony w stosunku .
  • Łącze składa się z dwóch elementów podrzędnych, na zastępczy <div>klasy rozmycia i z <img>klasy pic , który jest klarowny obraz.
  • Oba są pozycjonowane bezwzględnie i mają width: 100%, ale pic klasy ma wyższą kolejność stosu, tj. z-index: 2Co umieszcza ją powyżej symbolu zastępczego.
  • Obraz tła zamazanego symbolu zastępczego jest ustawiany za pomocą stylu wbudowanego w kodzie HTML.

 

Kod

.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

Teraz staje się to jeszcze prostsze i bardziej elastyczne dzięki CSS GRID. Trzeba tylko nakładać się na rozmyte tło (imgbg) z tekstem (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>

i 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
Dodanie wyjaśnienia do Twojej odpowiedzi byłoby świetne.
Arvind Maurya

Whit Sass, umieściłem następny kod i pomalowałem wszystkie elementy na ciele, może poprosić o pomoc, aby mieć tylko obraz na tle ciała ????? $ fondo: url (/grid/assets/img/backimage.png); {padding: 0; margines: 0; } body {:: before {content: ""; wysokość: 1008 pikseli; szerokość: 100%; wyświetlacz: flex; pozycja: absolutna; obraz w tle: $ fondo; powtarzanie w tle: brak powtarzania; pozycja tła: środek; rozmiar tła: okładka; filtr: rozmycie (1.6rem); }}
Carlos Boyzo

0

Bez użycia pseudoklasy z

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

Jeśli chcesz przewijać zawartość, ustaw pozycję zawartości na absolutną:

content {
   position: absolute;
   ...
}

Nie wiem, czy to było tylko dla mnie, ale jeśli nie, to jest poprawka!

Również ponieważ tło jest stałe, to znaczy, że masz „paralaksy” efekt! Więc teraz ta osoba nie tylko nauczyła cię, jak robić rozmyte tło, ale jest to także efekt tła paralaksy!


4
nie odpowiada na pytanie
gorn
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.