Hintergrundbild mit Hilfe von CSS aufhellen/verblassen lassen?
Ich habe ein sehr nettes Bild gefunden und würde es gern als Hintergrundbild für meine Website verwenden, jedoch hat das Bild sehr grelle Farben, daher würde ich es gern etwas aufhellen oder verblassen, ggf. auch abdunkeln. Wie mach ich das?
PS: Der Befehl "opacity" hat leider nicht funktioniert, und ich möchte das Bild nicht selber nachbearbeiten, sondern es wirklich über den Code regeln.
3 Antworten
https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity
Aber besser wäre wirklich eine Nachbearbeitung des Bildes in einem Bildbearbeitungsprogramm.
Ich habe ein sehr nettes Bild gefunden (...)
Beachte das Urheberrecht, sollte das Bild nicht von dir sein.
Ich beziehe meine Bilder von Pixabay, jedes Bild dort besitzt eine creative common Lizenz, ich mach mir da keine Sorgen, aber danke für den Hinweis.
Du wirst auf diese Art und Weise wohl immer den ganzen Inhalt des Body verändern, falls so Dinge wie opacity da überhaupt funktionieren, habe ich noch nicht versucht.
Wenn du aber direkt im Body ein div platzierst und diesem das Hintergrundbild zuordnest, dann solltest du darauf sowohl opacity als auch diverse Filter anwenden können um das Bild anzupassen: https://css-tricks.com/almanac/properties/f/filter/
Also z.B. so:
<html>
....
<body>
<div id="content">
...dein Inhalt...
</div>
</body>
</html>
Und dann eben per CSS der Klasse .content mit Hilfe von :before das Hintergrundbild verpassen und dort die Filter anwenden.
Siehe dazu auch: https://goo.gl/71mmVa
Hast du’s auch richtig geschrieben und die Richtige klasse genommen?
Beispiel:
.img {
opacity: 0.8;
}
Ich versuch's mal. Danke für den Tipp.
Natürlich sind alle Leerzeichen und Zeilenumbrüche richtig gesetzt und eingerückt
Genau so hab ich es probiert. Leider funktioniert es so nicht :/
Ich zeig dir mal den Codeausschnitt
body { background-image: url('Thema.jpg'); background-repeat: no-repeat; background-size: 100% 100%; background-attachment: fixed; opacity: 0.7;}
Versuch doch mal das Bild über die html Datei einzubinden mit dem img-Tag und dann nimmst du img als klasse und gibst der blasse dann deine Befehle
Ich persönlich Binde Bilder immer im html Dokument ein vllt bringt das ja was ;)