Creando un degradado lineal transparente a un div

Question

Me gustaría crear un degradado lineal transparente a un div. ¿Hay alguna manera de hacer eso con jquery? ¿O debería usar alguna otra biblioteca como raphaeljs? Me gustaría conseguir un efecto similar a la siguiente:

Answer 1

Por qué no mantenga la luz y un navegador compatible.

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

Answer 2

No está seguro de qué es exactamente lo que está buscando, pero echa un vistazo a Gradienter jQuery plugin.

Answer 3

Puede hacerlo con CSS3:

P. ej

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

creé esta usando Raphael js http://www.jsfiddle.net/pahnin/fsdnW/4/ salida si u como él

** editar **

lo creé añadiendo un rectagle con gradiente y que sea lo mismo tamaño que el div

Answer 5

El truco aquí es que el degradado de su ejemplo se asigna uniformemente al texto y al contenedor. Es fácil asignar un degradado transparente a la propiedad de fondo, como mucha gente ha mostrado, pero eso dejará el texto sin cambios.

Lamentablemente, no creo que haya ninguna manera directa de obtener el efecto degradado que desee sin comprometerse, dependiendo de sus necesidades, pueden ser soluciones que valen la pena. Entonces para ese fin, aquí hay dos ejemplos de cómo lograr el efecto que se muestra en su imagen de ejemplo, ambos usando el <canvas>.

1. Fingiendo

Demo on JSLint.

Esto es simple, que la posición de un elemento <canvas> por encima de su bloque de texto y dibujar en un gradiente desde totalmente transparente para el color del fondo debajo del bloque de texto . No es realmente transparente, por lo que en realidad no revela ninguna información a continuación, pero si estás tratando de desvanecer a un color sólido y predeterminado, entonces esto funciona bastante bien.

2. texto lienzo

Demo on JSLint

Este ejemplo es más complicado, pero una réplica completa del efecto de transparencia se muestra en el ejemplo. Esencialmente, abandona completamente el bloque de texto HTML y simplemente dibuja todo el shabang en el <canvas>.Sin embargo, tiene algunas desventajas:

1. El lienzo no parece que les gusta ajuste de texto, por lo que tendría que especificar líneas individuales.

2. El texto del lienzo aún puede tener implementaciones de navegador un poco turbias.

3. Accesibilidad & SEO, aunque podría escribir fácilmente un plugin jQuery para transformar elementos DOM normales con texto en esta solución en tiempo de ejecución.

Answer 6

Lo creé usando jquery y 112 divs. Un div principal para las diez líneas de div de texto cada una más transparente, y un div de fondo con 100 divs cada uno más transparente.

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

Answer 7

Como bArmageddon señaló, la solución aceptada no resuelve el problema - sólo se desvanece el fondo. Una solución sencilla sería utilizar: antes o: después de añadir el gradiente sobre el texto:

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