So wenden Sie einen CSS-Filter auf ein Hintergrundbild an

467

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?

Fuchs
quelle
2
Verwischen
Sie

Antworten:

528

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

Aniket
quelle
79
Ein etwas besserer Weg, dies zu tun, ist die Verwendung von .content: before anstelle des zusätzlichen Markups "Hintergrundbild". Ich habe den Stift hier aktualisiert: codepen.io/akademy/pen/FlkzB
Matthew Wilcoxson
6
fwiw, nur Webkit hat diese Funktion implementiert, und zwar nur mit dem Herstellerpräfix, sodass die Präfixe ms-, o- und moz- unbrauchbar sind.
Jon z
2
Es wird standardmäßig in Firefox 35.0 und höher unterstützt: caniuse.com/#feat=css-filters
Mikko Rantalainen
1
JUst aktualisiert auf FF 35, und es funktioniert ohne Präfix
Aamir Mahmood
1
@EdwardBlack Ich denke nicht, dass es ein Problem ist, aber um eine dauerhafte Unschärfe zu haben, müssen Sie auf Bildbearbeitungswerkzeuge zurückgreifen. Die andere Möglichkeit besteht darin, eine Art Bilderfassung mit dem PhantomJS / Headless-Webkit-Browser durchzuführen und diese dann bereitzustellen. Dies ist jedoch eine mühsame Methode, um das gleiche Ergebnis zu erzielen.
Aniket
70

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.

Necrone
quelle
1
Die Einschränkung dabei ist, dass Sie Pseudoelemente in js nicht manipulieren können. Wenn Sie nicht müssen, dann ist es eine gute Lösung.
Posit Labs
6
Wenn Ihnen der unscharfe weiße Rand nicht gefällt, können Sie das widthund heightbis erhöhen 110%und dann einen Versatz von -5%bis topund leftder content:beforeKlasse hinzufügen .
Chad Fawcett
1
Es funktioniert für mich, aber ich möchte, dass das Hintergrundbild auch gescrollt wird, wenn der Benutzer die Seite scrollt. Die Position FIXED stoppt das. Wie kann man dieses Problem beseitigen?
DEEPAN KUMAR
61

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.

hitautodestruct
quelle
5
Auch wenn es nicht in allen Browsern funktioniert, erhalten Sie meine Stimme für die Bereitstellung der spezifikationsrichtigen Nicht-Hack-Methode, um dies zu tun.
MrMesees
AFAIK Dies ist eine nicht standardmäßige Funktion, daher gibt es keine Spezifikation dafür.
Vitim.us
3
KOPF HOCH! Im Jahr 2018 hat die Browserunterstützung dafür deutlich abgenommen! Wird in Edge, Firefox oder Chrome nicht unterstützt.
ProtoEvangelion
@protoEvangelion Scheint, dass es in Edge 16+ verfügbar sein wird, und ich sehe keine anderen Browser, die sagen, dass sie dies nicht implementieren werden. Irgendwelche Fakten, um diese Behauptungen zu stützen?
Hitautodestruct
@hitautodestruct Laut caniuse.com unterstützen IE, Edge 16, Firefox und Chrome dies derzeit standardmäßig nicht. Sie haben Recht, dass Edge 17+ dies unterstützt. Vielen Dank für den Hinweis. Coole Antwort übrigens, ich hoffe
wirklich
26

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.

Posit Labs
quelle
6

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>

Sumitava Das
quelle
5

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 */
}
a99
quelle
Es funktioniert nicht bei mir. Hast du eine funktionierende jsfiddle?
Matt
2

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

Saikat
quelle
1

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:

SharpC
quelle
Sie laden 2 Bilder herunter
Ced
1

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

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>

codeWithMe
quelle
1

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

Max Tusken
quelle
Gibt es gute Möglichkeiten, dies localhostbeim Testen zum Laufen zu bringen ?
Jonathan
Die Unschärfemenge für ein Bild mit großer Auflösung ist viel zu subtil. Wie kann ich die Unschärfemenge drastisch erhöhen, ohne dass sie blockiert? Die Breite hilft ein wenig, aber es sieht zu blockig aus, wenn ich zu viel verwische
Jonathan
0

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

Jonathan
quelle
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);
}

Prajeesh Loremine
quelle
0

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>

Harsha Alva
quelle
0

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;
      }
Eljeddi Oussema
quelle
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);
    }
}
Carlos Boyzo
quelle
1
Es wäre großartig, Ihrer Antwort eine Erklärung hinzuzufügen.
Arvind Maurya
Whit Sass Ich habe den nächsten Code eingefügt und alle Gegenstände auf den Körper gemalt. Vielleicht kann ich um Hilfe bitten, um nur ein Bild auf dem Körperhintergrund zu haben. $ Fondo: URL (/grid/assets/img/backimage.png); {Polsterung: 0; Rand: 0; } body {:: before {content: ""; Höhe: 1008px; Breite: 100%; Anzeige: flex; Position: absolut; Hintergrundbild: $ Fondo; Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: Mitte; Hintergrundgröße: Cover; Filter: Unschärfe (1.6rem); }}
Carlos Boyzo
0

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>

Code-Builder
quelle
-6

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!

user7226407
quelle
4
beantwortet die Frage nicht
gorn