So erstellen Sie einen Farbverlauf über ein Img-Tag

Ich erstelle eine Website mit einem Hintergrundbild, das mit dem Browserfenster an seine Größe angepasst werden muss. Ich habe den folgenden Code verwendet, um dies zu erreichen:So erstellen Sie einen Farbverlauf über ein Img-Tag

<style type="text/css"> 
#background-image { 
position: absolute; 
right: 0; 
top: 0; 
height: 100%; 
background-image: url('image.jpg'); 
z-index: -1; 
} 
</style> 
<img id="background-image" src="image.jpg" />

Nun, was ich tun möchte, ist ein Gefälle über dieses Bild anwenden - so dass es auf der linken Seite auf weiß verblasst - dass die Stellabmessungen des Bildes übereinstimmt . Gibt es einen Weg, dies zu erreichen?

Vielen Dank im Voraus!

Quelle

2012-04-06 jmart

Schauen Sie einfach auf den Code auf dieser Seite erzeugt: http://www.colorzilla.com/gradient-editor/

Ich denke, u auch eine z-index und png-Datei verwenden können.

Quelle

2012-04-06 14:07:52 Kuba

Danke, aber das Problem ist die Größe von entweder der div mit dem Gradienten-Styling oder ein Png-Gradient mit der IMG. – jmart

Also CSS-Methode sollte funktionieren. Erstellen Sie einfach die Klasse, verwenden Sie ein IMG-Tag und zeichnen Sie es über das vorhandene Bild. In diesem Fall benötigen Sie keine Größe eines Bildes oder Divs. – Kuba

Leider kann dieser Hintergrundgradient nicht einfach über ein img-Tag angewendet werden. – jmart

können Sie CSS verwenden, um sowohl das Hintergrundbild zu kombinieren und die Gradienten

url('image.jpg') 0 0 no-repeat 100% 100%, linear-gradient(top, #000000 0%, #ffffff 100%);

mit den Werten, die für Sie am besten funktionieren.

Quelle

2012-09-16 07:39:17

So erstellen Sie einen Farbverlauf über ein Img-Tag

Antwort

Verwandte Themen