Hintergrund HTML, CSS Bild?
Hallo zusammen,
ich will das auf meiner Webseite auf der rechten hälfte das Bild ist und auf der linken Seite eine Farbe z.B. Grau, wie kann ich's machen dass sich das rechte bild sich dann zur mitte in die Hintergrundfarbe verläuft?
Danke!
5 Antworten
Noch als Ergänzung zu den Antworten:
Falls du deine Farbfläche und die Farbe über dem Bild zentral verwalten möchtest, probiere es mal mit css-Variablen.
In dem Fall müsstest du ein Element über das Bild drüberlegen, und diesem Element einen linear-gradient von grau zu transparent geben.
Schau mal hier:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients
unter "Overlaying gradients". Das Bild lässt du von rechts nach links transparent werden und die Farbe von links nach rechts. Oder so ähnlich.
Wenn du aber kompliziertere Gradienten haben möchtest, die die Frabe des Bildes verwenden, dann musst du das wohl anders machen, am besten vorher irgendwo anfertigen, dann einfügen, ansonsten mit JavaScript.
Du kannst es auch nach uralter Methode machen. Da diese Seite hier html verarbeitet, kann ich es nicht 1:1 posten
Du legst eine Tabelle an: eine Zeile und darin 2 Zellen. Die Höhe der Tabelle setzt Du auf 100 %. Damit hast Du zwei Bereiche, die Du füllen kannst.
Mit anderen Worten: Eine Tabelle 1 hoch, 2 breit.
Diese Struktur können 100 % aller Browser aller Geräte verarbeiten, weil sie so alt ist.
Bleibt noch das Bild. Lasse auch das die Browser machen, indem Du ihnen die Größe vorgibst. Etwa, wenn Du eine Grafik machst, die 1 Pixel hoch ist und von grün nach rot läuft, setzt Du die Darstellung auf height = 100 %. Und schon wird das Ding, das nur 1 KB hat, als riesiger Hintergrund über die ganze Tabelle = Seite gezogen.
Das Nette an der Sache: Alle Geräte finden Wege, es sauber aufzulösen. Sieht also am Handy ebenso adrett aus wie auf der Public Viewing Wand.
Ich probiere es, ungetestet:
<table>
<tr>
<td>text</td>
<td>Bild</td>
</tr>
</table>
Leg ünet dein Hintergrindbild einen Container mit background: linear-gradient(...)
Alex