it-swarm.com.de

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

Ich habe eine JPEG-Datei, die ich als Hintergrundbild für eine Suchseite verwende, und ich verwende CSS zum Festlegen, da ich in Backbone.js contexts arbeite:

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

Ich möchte einen CSS 3-Unschärfefilter only auf den Hintergrund anwenden, aber ich bin 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 unter background-image in meinem CSS formatiert es die gesamte Seite und nicht nur den Hintergrund. Gibt es eine Möglichkeit, nur das Bild auszuwählen und den Filter darauf anzuwenden? Gibt es eine Möglichkeit, die Unschärfe für jedes andere Element auf der Seite zu deaktivieren?

418
fox

Schauen Sie sich diese pen an.

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

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

Beide sind mit position: fixed und left: 0; right: 0; platziert. Der Unterschied bei der Anzeige ergibt sich aus den z-index-Werten, die für die Elemente unterschiedlich festgelegt wurden.

HTML

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

CSS

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;

  display: block;
  background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
  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;
}

Entschuldigung für den Lorem Ipsum Text. 

Aktualisieren

Danke an Matthew Wilcoxson für eine bessere Implementierung mit .content:beforehttp://codepen.io/akademy/pen/FlkzB

491
Aniket

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.

63
Necrone

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

30
hitautodestruct

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.

26
posit labs

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>

6
Sumitava Das

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

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

2
saikat

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>

1
codeWithMe

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

1
Max Tusken

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:

1
SharpC

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;
      }
0
Eljeddi Oussema

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

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

0
Jonathan

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>

0
Harsha Alva