CSS3 Transparence + Gradient

RGBA est très amusant, et est donc -webkit-gradient, -moz-gradient, et euh... progid:DXImageTransform.Microsoft.gradient... ouais. 🙂

Est-il un moyen de combiner les deux, RGBA et dégradés, de sorte qu'il n'y a dégradé de transparence alpha à l'aide de l'actuelle/dernière CSS specs.

commentaire devrait devenir la a accepté, comme il est plus pertinent pour les normes modernes.

InformationsquelleAutor Jourkey | 2010-02-19

321

Oui. Vous pouvez utiliser rgba dans les deux webkit et moz gradient de déclarations:
```
/* webkit example */
background-image: -webkit-gradient(
  linear, left top, left bottom, from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);
```
(src)
```
/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);
```
(src)

Apparemment, vous pouvez même le faire dans IE, à l'aide d'un étrange "extended hex de syntaxe". La première paire (dans l'exemple 55) fait référence au niveau de l'opacité:
```
/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);
```
(src)
- Pour info, "extension de hex" est à seulement 32 bits ARGB au lieu de 24 bits, les valeurs de couleurs RVB.
- j'aimerais qu'ils fonctionnent dans la norme css, trop, mais avec l'alpha à la fin (il semble plus naturel): #0001 serait de courte hex pour “presque transparent noir” et #ffcc00ff serait le même que #ffcc00, c'est à dire “complètement opaque de mandarine jaune”
- découvrez également les CSS3 Gradient Generator plus à Colorzilla qui a un tas de nice presets et tous la croix navigateur compatible variations à atteindre vos dégradé
- argb sons beaucoup plus fraîches que rgba
- donc, j'ai vérifié, fonctionne sur tous les principaux navigateurs, mais il ne fonctionne pas sur l'opéra, la moindre idée?
- tant pis, j'ai juste trouvé 😉 background-image: -o-linear-gradient(top,rgba(255,255,255,0),rgba(210, 230, 250,1));
- Si ça intéresse quelqu'un, il y a un a suggéré de modifier ici (que j'ai refusé), en montrant comment il pourrait également être fait dans l'Opéra.
- Vous pouvez utiliser ce tableau de valeurs hexadécimales et les pourcentages pour comprendre la valeur hexadécimale pour le pourcentage d'opacité que vous voulez.
- Nice thread pousser...
- Je n'arrive pas à faire ce travail dans IE8 où je vais combiner (opacité) alpha avec un dégradé. J'utilise le gradient d'éviter le noir, les ombres d'une image au format png transparent. filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#550000FF, endColorstr=#550000FF)";
InformationsquelleAutor Owen
94

Nouvelle syntaxe a été pris en charge pour un certain temps par tous les navigateurs modernes (à partir de Chrome 26, Opera 12.1, 10 IE et Firefox 16): http://caniuse.com/#feat=css-gradients
```
background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
```
Ce qui rend un dégradé, à partir de solide noir en haut, complètement transparent à fond.

Documentation sur MDN.
- .. crée solide noir en haut à complètement transparent à bas
- Je suppose que c'est une suggestion et ne fait pas travailler?
- Avez-vous essayé? Fonctionne très bien.
InformationsquelleAutor George Filippakos

C'est des trucs vraiment cool! J'ai besoin d'à peu près la même, mais avec l'horizontale dégradé de blanc vers transparent. Et il fonctionne parfaitement bien! Ici ist mon code:

.gradient{
        /* webkit example */
        background-image: -webkit-gradient(
          linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

        /* mozilla example - FF3.6+ */
        background-image: -moz-linear-gradient(
          right center,
          rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
        );

        /* IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColorStr=#FFFFFF
        );

        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColoStr=#FFFFFF
        );
    }

pour référence, sur la mise en œuvre de Microsoft, gradientType=1 est horizontale, 0 est vertical.
Les IE7 et IE8 gradients ne précisez pas l'alpha de la couleur? Ont-ils vraiment fade et transparent?

InformationsquelleAutor Misha

Voici mon code:

background: #e8e3e3; /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%, rgba(246, 242, 242, 0.95) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232, 227, 227, 0.95)), color-stop(100%,rgba(246, 242, 242, 0.95))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(232, 227, 227, 0.95)', endColorstr='rgba(246, 242, 242, 0.95)',GradientType=0 ); /* IE6-9 */

Gradien ne fonctionnent pas pour IE9

InformationsquelleAutor Miloš Miljković

2
```
#grad
{
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}
```
J'ai trouvé ça dans w3schools et adapté à mes besoins alors que je cherchais de gradient et de la transparence. Je suis en fournissant le lien pour consulter w3schools. Espérons que cela aide si quelqu'un est à la recherche de gradient et de la transparence.

http://www.w3schools.com/css/css3_gradients.asp

Aussi je l'ai essayé dans w3schools pour modifier l'opacité de coller le lien pour vérifier

http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans

Espère que cela aide.

InformationsquelleAutor sagar

Je viens de tomber sur cet exemple plus récent . Afin de simplifier et d'utiliser les exemples les plus récents, donnant le css d'un sélecteur de classe de "grad',(j'ai inclus la rétrocompatibilité)

.grad {
background-color: #F07575; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(top left, red, rgba(255,0,0,0));/* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
background-image: -moz-linear-gradient(top left, red, rgba(255,0,0,0));/* For Firefox (3.6 to 15) */
background-image: -o-linear-gradient(top left, red, rgba(255,0,0,0));/* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0)); /* Standard syntax; must be last */
}

de
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

InformationsquelleAutor davidrynn

Le suivant est celui que j'utilise pour générer un gradient vertical de complètement opaque (en haut), 20% dans la transparence (en bas) de la même couleur:

background: linear-gradient(to bottom, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: -o-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* Opera 11.10+ */
background: -moz-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: -ms-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* IE10+ */
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE 5.5 - 9 */

InformationsquelleAutor Riccardo Volpe

Vous devez vous connecter pour publier un commentaire.