Erstellen eines linearen transparenten Farbverlaufs zu einem Div

Question

Ich möchte einen linearen transparenten Farbverlauf zu einem Div erstellen. Gibt es eine Möglichkeit, das mit Jquery zu tun? Oder sollte ich eine andere Bibliothek wie Raphaeljs benutzen? Ich möchte einen Effekt wie die folgenden erreichen:

Answer 1

Warum halten Sie es nicht leicht und Browser kompatibel.

div 
{ 
    backgroud-image: url('images/gradient.png'); 
    background-repeat: repeat-x; 
    background-position: top right; 
} 

Answer 2

nicht sicher, was genau Sie suchen, aber einen Blick auf Gradienter jQuery plugin nehmen.

Answer 3

Sie können es mit CSS3 tun:

Z.B.

div { 
    opacity: 0.5; 
    background: #999; /* for non-css3 browsers */ 

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */ 
} 

http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/

http://gradients.glrzad.com/

http://www.colorzilla.com/gradient-editor/

http://css-tricks.com/css3-gradients/

Answer 4

Ich habe diese mit Raphael js http://www.jsfiddle.net/pahnin/fsdnW/4/ Kasse, wenn u wie es

** bearbeiten **

Ich habe es durch einen Rectagle mit Steigung zugab und so gleiche Größe wie die Herstellung von div

Answer 5

Das schwierige Bit hier ist, dass der Farbverlauf in Ihrem Beispiel gleichmäßig auf den Text sowie den Container abgebildet wird. Es ist einfach, der Hintergrundeigenschaft einen transparenten Farbverlauf zuzuordnen, wie viele Leute gezeigt haben, aber das lässt den Text unverändert.

Leider glaube ich nicht, dass es einen direkten Weg gibt, den gewünschten Farbverlauf zu erhalten, ohne Kompromisse eingehen zu müssen. Je nach Ihren Anforderungen können sich diese Lösungen lohnen. Zu diesem Zweck, hier sind zwei Beispiele, wie Sie den Effekt erreichen, der in Ihrem Beispielbild gezeigt wird, beide unter Verwendung der <canvas>.

1. Faking es

Demo on JSLint.

Das ist einfach, positionieren Sie ein <canvas> Element über dem Textblock und von vollständig transparent in einem Gradienten ziehen auf die Farbe des Hintergrundes unterhalb des Textblocks . Es ist nicht wirklich transparent, also zeigt es unten keine Informationen, aber wenn Sie versuchen, zu einer festen, vorbestimmten Farbe zu verblassen, dann funktioniert das ziemlich gut.

2. Leinwand Text

Demo on JSLint

Dieses Beispiel ist komplizierter, aber repliziert vollständig die transparente Wirkung in Ihrem Beispiel gezeigt. Im Wesentlichen wird der HTML-Textblock komplett umgraben und nur der gesamte Shabang auf die <canvas> gezeichnet.Sie hat jedoch einige Nachteile:

1. Die Leinwand Text nicht zu mögen Verpackung scheint, so würden Sie einzelne Zeilen angeben.

2. Canvas-Text möglicherweise noch etwas trübe Browser-Implementierungen.

3. Erreichbarkeit & SEO, obwohl Sie leicht ein jQuery-Plugin für die Umwandlung von regulären DOM-Elementen mit Text in diese Lösung zur Laufzeit schreiben könnten.

Answer 6

Ich habe es mit jquery und 112 Divs erstellt. Ein Eltern-Div für die zehn Zeilen von Text-Divs ist jeweils transparenter und ein Hintergrund-Div mit 100 Divs ist jeweils transparenter.

http://jsfiddle.net/generalhenry/bDd5w/

Answer 7

Wie bArmageddon wies darauf hin, ist die akzeptierte Lösung das Problem nicht lösen - es blendet nur den Hintergrund. Eine einfache Lösung wäre zu verwenden: vor oder: nach, um den Gradienten über den Text hinzuzufügen:

div { 
    position: relative; 
} 
div:before { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 20px; 
    background: url("transparent_fade.png") repeat-x; 
}