Wie wendet man einen CSS-Filter auf ein Hintergrundbild an

Question

Ich habe eine JPEG-Datei, die ich als Hintergrundbild für eine Suchseite verwende, und ich verwende CSS, um es zu setzen, weil ich innerhalb von Backbone.js-Kontexten 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 gestalten soll. Wenn ich versuche:

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

direkt unterhalb von background-image in meinem CSS, dann wird die gesamte Seite gestaltet, anstatt nur den Hintergrund. Gibt es eine Möglichkeit, nur das Bild auszuwählen und den Filter darauf anzuwenden? Alternativ, gibt es eine Möglichkeit, den Unschärfefilter für jedes andere Element auf der Seite einfach auszuschalten?

Answer 1

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

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

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

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url('https://i.stack.imgur.com/CjzQS.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;
}

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

Matthew Wilcoxson schlug vor, die Implementierung unter Verwendung von .content::before zu vermeiden, um eine zweite Div: https://codepen.io/akademy/pen/FlkzB

Answer 2

Abschaffung der Notwendigkeit eines zusätzlichen Elements, zusammen mit der Anpassung des Inhalts an den Dokumentenfluss, anstatt wie andere Lösungen fixiert/absolut zu sein.

Erreicht mit

.content {
  /* Dies ist erforderlich, da der Hintergrund um einige Pixel am oberen Rand verschoben wird */
  overflow: auto;
  position: relative;
}

.content::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('https://i.stack.imgur.com/CjzQS.jpg');
  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);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Wenn Sie daran interessiert sind, die weißen Ränder an den Kanten zu entfernen, verwenden Sie eine Breite und Höhe von 110% und eine linke und obere Position von -5%. Dadurch werden Ihre Hintergründe leicht vergrößert, aber es sollte keine Farbe von den Rändern eindringen.

.content {
  /* Dies ist erforderlich, da der Hintergrund um einige Pixel am oberen Rand verschoben wird */
  overflow: auto;
  position: relative;
}

.content::before {
  content: "";
  position: fixed;
  top: -5%;
  left: -5%;
  right: -5%;
  z-index: -1;

  display: block;
  background-image: url('https://i.stack.imgur.com/CjzQS.jpg');
  background-size:cover;
  width: 110%;
  height: 110%;

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Answer 3

Wie in anderen Antworten bereits erwähnt, kann dies mit Folgendem erreicht werden:

• Eine Kopie des unscharfen Bildes als Hintergrund.
• Ein Pseudo-Element, 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, die derzeit in Chrome, Firefox, Edge, Safari und iOS Safari unterstützt wird (siehe caniuse.com für Statistiken).

Von Mozilla devdocs:

Die Eigenschaft backdrop-filter bietet Effekte wie das Unscharfzeichnen oder das Verschieben der Farbe des Bereichs hinter einem Element, der dann durch das Element hindurch gesehen werden kann, indem die Transparenz/Deckkraft des Elements angepasst wird.

Sehen Sie sich auf caniuse.com die Verwendungstatistiken an.

Verwenden Sie es wie folgt. Wenn Sie nicht möchten, dass der Inhalt darin unscharf ist, verwenden Sie die Hilfsklasse .u-non-blurred

.background-filter::after {
  -webkit-backdrop-filter: blur(5px); /* Verwendung für Safari ab Version 9, Edge ab Version 17 (kein Fehler) und iOS Safari ab Version 9.2 */
  backdrop-filter: blur(5px); /* Unterstützt in Chrome 76 */

  content: "";
  display: block;
  position: absolute;
  width: 100%; height: 100%;
  top: 0;
}

.background-filter {
  position: relative;
}

.background {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
  width: 200px;
  height: 200px;
}

/* Verwendung für Inhalt, der nicht unscharf sein soll */
.u-non-blurred {
  position: relative;
  z-index: 1;
}

  Kermit D. Frog

Answer 4

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

Answer 5

Das Folgende ist eine einfache Lösung für moderne Browser in reinem CSS mit einem 'before'-Pseudo-Element, ähnlich der Lösung von Matthew Wilcoxson.

Um den Bedarf an Zugriff auf das Pseudo-Element zum Ändern des Bildes und anderer Attribute in JavaScript zu vermeiden, verwenden Sie einfach inherit als Wert und greifen Sie über das übergeordnete Element (hier body) darauf zu.

body::before {
    content: ""; /* Wichtig */
    z-index: -1; /* Wichtig */
    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;  /* Das Bild sollte hier nicht dargestellt werden */
  width: 100%;
  height: 100%;
  position: fixed; /* Oder absolut für scrollbare Hintergründe */
}