Ich habe eine JPEG-Datei, die ich als Hintergrundbild für eine Suchseite verwende, und ich verwende CSS, um sie festzulegen, da ich in den Kontexten von Backbone.j arbeite :

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

Ich möchte einen CSS 3-Unschärfefilter nur auf den Hintergrund anwenden , bin mir aber nicht sicher, wie ich nur dieses eine Element formatieren soll. Wenn ich es versuche:

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

Direkt darunter background-imagein meinem CSS wird die gesamte Seite und nicht nur der Hintergrund formatiert. Gibt es eine Möglichkeit, nur das Bild auszuwählen und den Filter darauf anzuwenden? Gibt es alternativ eine Möglichkeit, die Unschärfe für jedes andere Element auf der Seite einfach auszuschalten?

Schauen Sie sich diesen Stift an .

Sie müssen zwei verschiedene Container verwenden, einen für das Hintergrundbild und einen für Ihren Inhalt.

Im Beispiel habe ich zwei Container erstellt, .background-imageund .content.

Beide werden mit position: fixedund platziert left: 0; right: 0;. Der Unterschied bei der Anzeige ergibt sich aus den z-indexWerten, die für die Elemente unterschiedlich eingestellt wurden.

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

Entschuldigung für den Lorem Ipsum Text.

Aktualisieren

Vielen Dank an Matthew Wilcoxson für eine bessere Implementierung mit .content:before http://codepen.io/akademy/pen/FlkzB

Stift

Abschaffung der Notwendigkeit eines zusätzlichen Elements und Anpassung des Inhalts an den Dokumentenfluss, anstatt wie bei anderen Lösungen fest / absolut zu sein.

Erreicht mit

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

Überlaufautomatik ist erforderlich, andernfalls wird der Hintergrund oben um einige Pixel versetzt.

Danach brauchen Sie einfach

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

BEARBEITEN Wenn Sie die weißen Ränder an den Rändern entfernen möchten, verwenden Sie eine Breite und Höhe von 110%sowie eine linke und eine obere von -5%. Dies vergrößert Ihren Hintergrund ein wenig - aber es sollte keine einfarbige Farbe an den Rändern auftreten.

Stift hier aktualisiert: https://codepen.io/anon/pen/QgyewB - Vielen Dank an Chad Fawcett für den Vorschlag.

Wie in anderen Antworten angegeben, kann dies erreicht werden mit:

• Eine Kopie des unscharfen Bildes als Hintergrund.
• Ein Pseudoelement, das gefiltert und dann hinter dem Inhalt positioniert werden kann.

Sie können auch verwenden backdrop-filter

Es gibt eine unterstützte Eigenschaft namens backdrop-filter, die derzeit in Chrome 76, Edge , Safari und iOS Safari unterstützt wird ( Statistiken siehe caniuse.com ).

Von Mozilla-Devdocs :

Die Eigenschaft Hintergrundfilter sorgt für Effekte wie Unschärfe oder Farbverschiebung des Bereichs hinter einem Element, die dann durch Anpassen der Transparenz / Deckkraft des Elements durch dieses Element sichtbar werden.

Unter caniuse.com finden Sie Nutzungsstatistiken.

Sie würden es so verwenden:

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

Update (12/06/2019) : Chromium wird backdrop-filterstandardmäßig mit aktivierter Version 76 ausgeliefert, die am 30/07/2019 fällig ist .

Update (01/06/2019) : Das Mozzilla Firefox-Team hat angekündigt , bald mit der Implementierung zu beginnen.

Update (21/05/2019) : Chromium, das gerade angekündigt wurde, backdrop-filter ist in Chrome Canary verfügbar, ohne das Flag "Experimentelle Webplattform-Funktionen aktivieren" zu aktivieren. Dies bedeutet, dass backdrop-filteres fast auf allen Chrome-Plattformen implementiert werden kann.

Dazu müssen Sie Ihr HTML neu strukturieren . Sie müssen das gesamte Element verwischen, um den Hintergrund zu verwischen. Wenn Sie also nur den Hintergrund verwischen möchten, muss dies ein eigenes Element sein.

Bitte überprüfen Sie den folgenden Code: -

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

Das Folgende ist eine einfache Lösung für moderne Browser in reinem CSS mit einem 'Vorher'-Pseudoelement, wie die Lösung von Matthew Wilcoxson.

Um zu vermeiden, dass auf das Pseudoelement zugegriffen werden muss, um das Bild und andere Attribute in JavaScript zu ändern, verwenden Sie es einfach inheritals Wert und greifen Sie über das übergeordnete Element (hier body) darauf zu.

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

.contentÄndern Sie die Registerkarte in CSS in position:absolute. Andernfalls kann die gerenderte Seite nicht gescrollt werden.

Obwohl alle genannten Lösungen sehr clever sind, schienen alle kleinere Probleme oder potenzielle Auswirkungen auf andere Elemente auf der Seite zu haben, als ich sie ausprobierte.

Um Zeit zu sparen, bin ich einfach zu meiner alten Lösung zurückgekehrt: Ich habe Paint.NET verwendet und bin zu Effects, Gaussian Blur mit einem Radius von 5 bis 10 Pixel gegangen und habe das nur als Seitenbild gespeichert. :-)

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

BEARBEITEN:

Ich habe es endlich zum Laufen gebracht, aber die Lösung ist keineswegs einfach! Siehe hier:

• Filter: Unschärfe (1px); funktioniert nicht in Firefox, IE und Oper

Alles was Sie tatsächlich brauchen ist "Filter":

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>

Dies ist natürlich keine CSS-Lösung, aber Sie können das CDN-Proton verwenden mit filter:

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

Es ist von https://developer.wordpress.com/docs/photon/api/#filter

Ich habe dies nicht geschrieben, aber ich habe festgestellt, dass es eine Polyfüllung für die teilweise backdrop-filtermit dem CSS SASS-Compiler unterstützten gibt. Wenn Sie also eine Kompilierungspipeline haben, kann dies gut erreicht werden (es wird auch TypeScript verwendet):

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

Diese Antwort gilt für ein horizontales Kartenlayout von Material Design mit dynamischer Höhe und einem Bild.

Um eine Verzerrung des Bildes aufgrund der dynamischen Höhe der Karte zu vermeiden, können Sie ein Hintergrundplatzhalterbild mit Unschärfe verwenden, um Höhenänderungen anzupassen.

Erläuterung

• Die Karte ist in einem With- <div>Class- Wrapper enthalten , bei dem es sich um eine Flexbox handelt.
• Die Karte besteht aus zwei Elementen, einem Bild, das auch ein Link ist, und Inhalt.
• Der Link <a>, Klasse Link , positioniert ist relativ .
• Die Verbindung besteht aus zwei Teilelementen, Platzhalter <div>Klasse blur und eine <img>Klasse pic die das klare Bild ist.
• Beide sind absolut positioniert und haben width: 100%, aber die Klasse pic hat eine höhere Stapelreihenfolge, dh sie z-index: 2platziert sie über dem Platzhalter.
• Das Hintergrundbild für den unscharfen Platzhalter wird über den Inline-Stil im HTML festgelegt.

Code

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

Jetzt wird dies durch die Verwendung von CSS GRID noch einfacher und flexibler. Sie müssen nur den unscharfen Hintergrund (imgbg) mit dem Text (h2) überlappen.

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

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

Ohne die Pseudoklasse von zu verwenden

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>

Wenn der Inhalt scrollbar sein soll, setzen Sie die Position des Inhalts auf absolut:

content {
   position: absolute;
   ...
}

Ich weiß nicht, ob das nur für mich war, aber wenn nicht, ist das die Lösung!

Auch da der Hintergrund festgelegt ist, es bedeutet , dass Sie eine haben „Parallaxe“ Effekt! Diese Person hat Ihnen also nicht nur beigebracht, wie man einen verschwommenen Hintergrund erstellt, sondern es ist auch ein Parallaxen-Hintergrundeffekt!