Wie kann ich einen programmatischen horizontalen Farbverlauf erstellen, der an einer bestimmten Stelle (in Pixeln auf der x-Achse) beginnt?
Hier ist das Problem - ich habe ein Bild, das als background-image - Im Idealfall möchte ich einen CSS-Farbverlauf deklarieren, der in der Nähe des Bildrandes (~1800 Pixel) beginnt und sanft zu Schwarz überblendet.
Bisher ist die beste Lösung, die ich habe, zwei div-Elemente zu haben - eine mit dem Fotohintergrund und die andere mit einem 1px hohen Farbverlauf Bild wiederholt entlang der y-Achse mit einem background-position die bei 1780px beginnt.
Dies funktioniert, aber ich möchte wirklich weg von der 1px Bild Trick zu bekommen. Irgendwelche Ideen?
<div id="photobg">
<div id="gradientbg">
</div>
</div>
#photobg {
background-image:url('photourl.jpg');
}
#gradientbg {
background-image:url('1pxgradient.jpg');
background-repeat: repeat-y;
background-position: 1780px 0;
height: 100%;
}Was ich tun möchte, in der Theorie, ist die Verwendung von Farbstopps bei 1780 px für einen CSS-Farbverlauf, aber wie ich es verstehe, unterstützt CSS nur %-Werte als Farbstopps.
Referenz: CSS 3 Farbverlauf n Pixel von unten - Webkit/Safari
