Hintergrundbild mit Hilfe von CSS aufhellen/verblassen lassen?

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, CSS, PHP
12.12.2017, 19:39

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.
JokesOnYou 
Beitragsersteller
 14.12.2017, 18:26

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.

0
mastema666
Nutzer, der sehr aktiv auf gutefrage ist
im Thema HTML
12.12.2017, 21:19

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
Besserwisserin3
12.12.2017, 19:06

Hast du’s auch richtig geschrieben und die Richtige klasse genommen?

Beispiel:

.img {
opacity: 0.8;
}
JokesOnYou 
Beitragsersteller
 12.12.2017, 19:07

Genau so hab ich es probiert. Leider funktioniert es so nicht :/

0
JokesOnYou 
Beitragsersteller
 12.12.2017, 19:09
@JokesOnYou 
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;}
0
Besserwisserin3  12.12.2017, 19:07

Zeug mal deinen Code

0
JokesOnYou 
Beitragsersteller
 12.12.2017, 19:10
@Besserwisserin3

Natürlich sind alle Leerzeichen und Zeilenumbrüche richtig gesetzt und eingerückt

0
Besserwisserin3  12.12.2017, 19:11

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 ;)

0