Wie kann man den Hintergrund in CSS langsam schwarz werden lassen?

Hallo zusammen! Ich möchte auf einer Website den Hintergrund langsam schwarz werden lassen. So ungefähr:

Wir haben das jetzt mit einem Bild gelöst. Hat aber leider nicht funktioniert, da es nur 1080p groß ist. Gibt es da einen Befehl für?

MfG Lass228

Comments

[Cloudstar002]

Meinst du über zeit oder einfach nen Farbverlauf?

[Lass228]

Im Verlauf des Bildes soll langsam ein eine Art "Schwarzfilter" einsetzen.

Answer 1

[siliciumcarbid2]

Das geht soweit ich weiß nur mit JavaScript. Um nicht endlos JS lernen zu müssen gibt es jQuery. Das ist eine JavaScript-Datei, die man einfach nur auf seiner Seite einbinden muss. Damit sind coole Dinge möglich - sehr zu empfehlen.

So zum Beispiel auch das faden eines Hintergrunds. Diesen Code habe ich dazu gefunden:

$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');

Es braucht also über dem Bild noch ein transparentes div, das dann langsam schwarz wird.

Das hab ich auch noch gefunden, wie es auch gehen könnte (auch mit jQuery):

https://api.jqueryui.com/highlight-effect/

Answer 2

[FaTech]

Ist der Filter Befehlt vllt. das, was du suchst? Oder backdrop-filter gab es meine ich auch noch

Comments

[Lass228]

Ja, irgendwas, mit dem man so eine Ausschwärzung hinbekommen kann.

[FaTech]

@Lass228

Google mal filter oder backdrop-filter, falls das aber nicht ist, was du suchst, kannst du auch ein div darüber legen mit rgba schwarz wert bei Farbe und transparenz, wie du es brauchst

Answer 3

[FlockeFindet]

Ich weiß ehrlich gesagt nicht ob das funktioniert, weil ich das jetzt auch nicht testen will, aber ich würde es mit einer Keyframe-Animation versuchen.