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-image
in 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?
css
background-image
css-filters
Fuchs
quelle
quelle
Antworten:
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-image
und.content
.Beide werden mit
position: fixed
und platziertleft: 0; right: 0;
. Der Unterschied bei der Anzeige ergibt sich aus denz-index
Werten, die für die Elemente unterschiedlich eingestellt wurden.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/FlkzBquelle
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
Überlaufautomatik ist erforderlich, andernfalls wird der Hintergrund oben um einige Pixel versetzt.
Danach brauchen Sie einfach
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.
quelle
width
undheight
bis erhöhen110%
und dann einen Versatz von-5%
bistop
undleft
dercontent:before
Klasse hinzufügen .Wie in anderen Antworten angegeben, kann dies erreicht werden mit:
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 :
Unter caniuse.com finden Sie Nutzungsstatistiken.
Sie würden es so verwenden:
Update (12/06/2019) : Chromium wird
backdrop-filter
standardmäß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, dassbackdrop-filter
es fast auf allen Chrome-Plattformen implementiert werden kann.quelle
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.
quelle
Bitte überprüfen Sie den folgenden Code: -
quelle
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
inherit
als Wert und greifen Sie über das übergeordnete Element (hierbody
) darauf zu.quelle
.content
Ändern Sie die Registerkarte in CSS inposition:absolute
. Andernfalls kann die gerenderte Seite nicht gescrollt werden.quelle
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:
CSS:
BEARBEITEN:
Ich habe es endlich zum Laufen gebracht, aber die Lösung ist keineswegs einfach! Siehe hier:
quelle
Alles was Sie tatsächlich brauchen ist "Filter":
quelle
Dies ist natürlich keine CSS-Lösung, aber Sie können das CDN-Proton verwenden mit
filter
:Es ist von https://developer.wordpress.com/docs/photon/api/#filter
quelle
localhost
beim Testen zum Laufen zu bringen ?Ich habe dies nicht geschrieben, aber ich habe festgestellt, dass es eine Polyfüllung für die teilweise
backdrop-filter
mit 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
quelle
quelle
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
<div>
Class- Wrapper enthalten , bei dem es sich um eine Flexbox handelt.<a>
, Klasse Link , positioniert ist relativ .<div>
Klasse blur und eine<img>
Klasse pic die das klare Bild ist.width: 100%
, aber die Klasse pic hat eine höhere Stapelreihenfolge, dh siez-index: 2
platziert sie über dem Platzhalter.Code
quelle
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.
und das css:
quelle
quelle
Ohne die Pseudoklasse von zu verwenden
quelle
Wenn der Inhalt scrollbar sein soll, setzen Sie die Position des Inhalts auf absolut:
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!
quelle