So wenden Sie einen CSS 3-Weichzeichnungsfilter auf ein Hintergrundbild an

Stift

Die Notwendigkeit eines zusätzlichen Elements wird aufgehoben, und der Inhalt wird in den Dokumentenfluss eingepasst, anstatt wie andere Lösungen fixiert oder absolut zu sein.

Erreicht mit

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

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

Danach brauchst du 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);
}

EDIT Wenn Sie die weißen Ränder an den Rändern entfernen möchten, verwenden Sie eine Breite und Höhe von 110% und links und oben von -5%. Dadurch werden Ihre Hintergründe ein wenig vergrößert - es sollte jedoch keine Volltonfarbe aus den Rändern bluten. 

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

Wie in anderen Antworten gesagt, 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 backdrop-filter verwenden.

Es gibt eine unterstützte Eigenschaft namens backdrop-filter. Diese Eigenschaft ist derzeit unterstützt in Edge , Safari und iOS Safari (siehe caniuse.com für Statistiken).

Von Mozilla devdocs :

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

Sie würden es gerne so benutzen:

.box {
  -webkit-backdrop-filter: blur(5px); // Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+
  backdrop-filter: blur(5px); // No one supports non prefixed yet
}

Für Statistiken siehe caniuse.com

Dazu müssen Sie Ihre 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 sein 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>

Einfache Lösung für moderne Browser in reinen CSS mit einem "Vorher" -Pseudoelement, wie die Lösung von Matthew Wilcoxson .. Um den Zugriff auf das Pseudoelement zum Ändern des Bildes und anderer Attribute in Java-Skripts zu vermeiden, verwenden Sie einfach den Wert erben und greifen Sie über das übergeordnete Element (hier Hauptteil) 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 */  
}   

Ändern Sie es auf der Registerkarte .content in CSS in position:absolute. Andernfalls kann die gerenderte Seite nicht scrollbar sein.

sie benötigen eigentlich nur "filter: blur (≪WhatEverYouWantInPx≫);"

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>

Natürlich ist dies keine CSS-Lösung, aber Sie können CDN Proton mit einem Filter verwenden:

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

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

Alle genannten Lösungen sind zwar sehr clever, alle hatten jedoch kleinere Probleme oder potenzielle Auswirkungen auf andere Elemente auf der Seite, als ich sie ausprobierte.

Um Zeit zu sparen, ging ich einfach zu meiner alten Lösung zurück: Ich benutzte Paint.NET und ging zu Effects, Gaußscher Weichzeichner mit einem Radius von 5 bis 10 Pixel und speicherte das einfach als Seitenbild. :-)

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

EDIT:

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 Opera

Jetzt wird dies durch die Verwendung von CSS GRID noch einfacher und flexibler. Sie müssen nur den blured 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;
      }

Ich habe dies nicht geschrieben, aber ich habe festgestellt, dass für den teilweise unterstützten backdrop-filter mit dem CSS-SASS-Compiler eine Polyfill vorhanden ist. Wenn Sie also eine Compilierpipeline haben, kann dies problemlos erreicht werden: (verwendet ebenfalls TypeScript)

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 die Höhenänderungen anzupassen.

Erläuterung

• Die Karte ist in einem <div> mit der Klasse wrapper enthalten, die eine Flexbox ist. 
• Die Karte besteht aus 2 Elementen, einem Bild, das auch ein Link und Inhalt ist. 
• Der Link <a>, class link , wird positioniert relative. 
• Der Link besteht aus 2 Unterelementen, einem Platzhalter <div> class blur und einem <img> class pic , der das klare Bild darstellt.
• Beide sind absolute und haben width: 100%, aber Klasse pic hat eine höhere Stapelreihenfolge, d. H. z-index: 2, wodurch sie über dem Platzhalter platziert wird.
• Das Hintergrundbild für den unscharfen Platzhalter wird im HTML über Inline-Stil 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>