Wie ist ein Bild mit transparenten Übergang programmierbar (css/HTML)?
Hallo!
Ich würde gerne für meine Website ein Bild einbauen, welches nach unten immer transparenter wird. Wenn es geht würde ich gerne nur css, HTML oder JavaScript nutzen. (Wie) Ist das möglich?
Ich möchte es gerne so ähnlich wie in YouTube Music machen, wenn man seinen eigenen Account ansieht. Hier ist auch nochmal ein Screenshot:
Das Ergebnis basiert auf 2 Abstimmungen
3 Antworten
Mit einem linear-gradient (Anleitungen / Erklärungen siehe hier), der von #00000000 (schwarz, komplett durchsichtig) bis #000000FF (schwarz, komplett sichtbar) verläuft.
#000000 ist die Farbe, also z.B. Schwarz. Die zwei Zahlen dahinter (im obigen Beispiel 00 oder FF) sind der Alpha-Channel, also wie durchsichtig die Farbe sein soll.
Schreibt man dann z.B. so:
background: linear-gradient(to bottom, #00000066, #000000FC)
In dem Fall startet er halb-durchsichtig, und wird dann immer sichtbarer nach unten hin, bzw. das Bild wird immer schwärzer überdeckt.
Hier sieht du, wie so eine Website dann aussehen könnte:
https://jsfiddle.net/y8of3axg/
Hier noch mit "Color-Stops", welche sagen, an welchem Punkt welche Farbe sein muss. Damit erreicht man oft ein schöneres Ergebnis:
Im einfachsten Fall erstellst Du einfach ein Bild das den entsprechenden Transparenz-Verlauf bereits drin hat. Das macht dir jedes vernünftige Bildbearbeitungsprogramm mit einem 24Bit-PNG.
Oder du imitierst den Verlauf, indem Du auf eine Hintergrundfarbe überblendet und dem Dokument zum Hintergrundbild diese Hintergrundfarbe zuweist.
Willst Du es Code-seitig lösen, bindest Du das Bild ein, legst einen Container darüber und gibst diesem mittels RGBA und CSS-Gradient einen Verlauf der der Sichtbarkeit von 1 zu 0 überblendet. https://www.w3schools.com/css/css3_gradients.asp
Programmieren tust Du mit HTML und CSS sowieso nicht. ;)
Mit der css Anweisung linear-gradient.
Danke! Du hast mir sehr geholfen!