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?

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

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

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.

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.

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>

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 */
}

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

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:

• filtr: rozmycie (1px); nie działa w Firefoksie, IE i operze

Wszystko czego potrzebujesz to „filtr”:

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>

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

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

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>

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

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

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>

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!