Création d'un dégradé linéaire transparent sur un div

Question

Je souhaite créer un dégradé linéaire linéaire en div. Y at-il un moyen de le faire avec jquery? Ou devrais-je utiliser une autre bibliothèque comme raphaeljs? Je voudrais obtenir un effet comme suit:

Answer 1

Pourquoi ne pas garder léger et navigateur compatible.

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

Answer 2

Je ne sais pas exactement ce que vous cherchez, mais jetez un oeil à Gradienter jQuery plugin.

Answer 3

Vous pouvez le faire avec CSS3:

Par ex

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

J'ai créé ce en utilisant la caisse Raphael http://www.jsfiddle.net/pahnin/fsdnW/4/ si u like it

** modifier **

Je l'ai créé en ajoutant un rectagle avec gradient et faire comme même taille que la div

Answer 5

Le petit problème ici est que le dégradé dans votre exemple est uniformément mappé au texte et au conteneur. Il est facile de mapper un dégradé transparent à la propriété d'arrière-plan, comme beaucoup de personnes l'ont montré, mais cela laissera le texte inchangé. Malheureusement, je ne pense pas qu'il existe un moyen simple d'obtenir l'effet de dégradé que vous voulez sans faire de compromis, en fonction de vos besoins, ils peuvent être des solutions intéressantes. Donc à cette fin, voici deux exemples de la façon d'obtenir l'effet montré dans votre image d'exemple, à la fois en utilisant le <canvas>.

1. faking

Demo on JSLint.

est simple, vous placez un élément <canvas> sur votre bloc de texte et de dessiner dans un gradient de totalement transparent à la couleur de l'arrière-plan en dessous du bloc de texte . Ce n'est pas vraiment transparent, donc cela ne révèle aucune information ci-dessous, mais si vous essayez de passer à une couleur solide et prédéterminée, cela fonctionne plutôt bien.

2. texte Canvas

Demo on JSLint

Cet exemple est plus compliqué, mais réplicats pleinement l'effet transparent montré dans votre exemple. Essentiellement, il divise entièrement le bloc de texte HTML et dessine simplement tout le shabang sur le <canvas>.Cependant, il a quelques inconvénients:

1. La toile ne semble pas comme texte d'emballage, de sorte que vous auriez à spécifier lignes individuelles.

2. Le texte de canevas peut encore avoir des implémentations de navigateur quelque peu sombres.

3. Accessibilité & SEO, bien que vous puissiez facilement écrire un plugin jQuery pour transformer des éléments DOM réguliers avec du texte dans cette solution lors de l'exécution.

Answer 6

Je l'ai créé en utilisant jquery et 112 divs. Une div parente pour les dix lignes de divs de texte, chacune plus transparente, et une div de fond avec 100 divs chacun plus transparent.

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

Answer 7

Comme bArmageddon a souligné, la solution retenue ne résout pas le problème - il disparaît tout simplement l'arrière-plan. Une solution simple serait d'utiliser: avant ou: après pour ajouter le dégradé sur le texte:

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