Création d'un dégradé transparent linéaire à une div

J'aimerais créer un linéaire dégradé transparent à un div. Est-il possible de le faire avec jquery? Ou dois-je utiliser une autre bibliothèque comme raphaeljs? J'aimerais obtenir un effet comme suit:

Création d'un dégradé transparent linéaire à une div

source d'informationauteur JohnDel

  1. 19

    Pourquoi ne pas garder léger et compatible avec les navigateurs.

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

    Vous pouvez le faire avec CSS3:

    E. g.

    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/

  3. 4

    Je l'ai créé à l'aide de jquery et 112 de la vrd. Un div parent pour les dix lignes de texte divs de plus en plus transparent, et un arrière-plan div avec 100 divs de plus en plus transparent.

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

  4. 3

    Le problème ici est que le dégradé dans votre exemple est uniformément mappé sur le texte ainsi que le conteneur. Il est facile de la carte d'un dégradé transparent à l'arrière-plan de la propriété, comme beaucoup de gens l'ont montré, mais qui va laisser le texte inchangé.

    Malheureusement, je ne pense pas qu'il y a un moyen simple pour obtenir l'effet de dégradé que vous souhaitez sans faire des compromis, en fonction de vos besoins, ils peuvent être la peine de solutions. Donc, à cette fin, voici deux exemples de comment faire pour obtenir l'effet illustré dans l'exemple de l'image, à la fois à l'aide de la <canvas>.

    1. Semblant

    Démo de JSLint.

    C'est simple, vous placez un <canvas> élément sur votre bloc de texte et de dessiner dans un dégradé de complètement transparent à la couleur de l'arrière-plan en dessous du bloc de texte. Ce n'est pas vraiment transparent, donc il ne fait pas révéler toutes les informations ci-dessous, mais si vous êtes en essayant de s'estomper pour un solide, de couleur prédéterminée, alors cela fonctionne assez bien.

    2. Toile de texte

    Démo de JSLint

    Cet exemple est plus compliqué, mais reproduit l'effet transparent indiqué dans votre exemple. Essentiellement, il abandonne le HTML du bloc de texte entièrement, et attire tout l'ensemble de la shabang sur le <canvas>. Cependant, il a quelques inconvénients:

    1. La toile n'a pas l'air d'aimer
      l'habillage du texte, de sorte que vous auriez à préciser
      des lignes individuelles.

    2. Toile de texte peut encore avoir un peu glauque navigateur implémentations.

    3. Accessibilité & RÉFÉRENCEMENT, si vous pouvez facilement écrire un plugin jQuery pour transformer régulière des éléments du DOM avec du texte dans cette solution pendant l'exécution.

  5. 0

    Pas sûr de ce que exactement que vous cherchez, mais jetez un oeil à Gradienter plugin jQuery.

  6. 0

    J'ai créé cette aide Raphael js http://www.jsfiddle.net/pahnin/fsdnW/4/
    caisse si u comme il

    ** edit **

    Je l'ai créé par l'ajout d'un rectagle avec gradient et de la rendre de même taille que le div

  7. 0

    Comme bArmageddon souligné, la solution retenue ne permet pas de résoudre le problème, il vient de s'estompe l'arrière-plan. Une solution simple serait d'utilisation :avant ou :après avoir 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;
}