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

Schritte, um das Hintergrundbild erfolgreich anzuwenden

1. Stellen Sie sicher, dass Sie Ihre HTML und CSS korrekt mit dem Link-Tag verknüpft haben

2. Ich habe keine Ahnung von relativen und Unterverzeichnissen, daher kann ich dazu nichts sagen

3. Die beste Methode, die für mich funktioniert hat, ist, wenn ich einen URL-Link im CSS verwendet habe

   yourcssdoc .image {

   background-image: url("fügen Sie hier Ihren Link mit Anführungszeichen ein") }

Answer 2

Wenn du möchtest, dass der Inhalt scrollbar ist, setze 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!

Außerdem da der Hintergrund fixiert ist, bedeutet dies, dass du einen "Parallax"-Effekt hast! Jetzt hat dir diese Person nicht nur beigebracht, wie man einen verschwommenen Hintergrund erstellt, sondern es handelt sich auch um einen Parallax-Hintergrundeffekt!