web-dev-qa-db-fra.com

Pouvez-vous créer des dégradés qui s'estompent en opacité en utilisant CSS ou JavaScript?

WebKit a introduit la possibilité de créer des dégradés CSS. Par exemple, avec le code suivant:

-webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));

Cependant, est-il possible d'avoir un gradient d'opacité en utilisant CSS? Je veux que le dégradé soit d'une seule couleur d'un côté, et se fane à une opacité nulle de l'autre.

La compatibilité entre les navigateurs n'est pas importante; J'en ai juste besoin pour travailler dans Google Chrome.

Existe-t-il un moyen de le faire en utilisant CSS? Sinon, quelque chose de similaire peut-il être fait en utilisant JavaScript (pas jQuery)?

Merci de votre aide.

javascriptcssgoogle-chromeopacitygradient
28
木川 炎星

Oui

pour les couleurs, utilisez rgba (x, y, z, o) où o est l'opacité

devrait marcher

par exemple.

background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));

Edit: Pour la valeur finale (opacité) 1 est opaque & 0 est transparent

17
Jasper

Oui, rgba(red, green, blue, alpha) est ce que vous devez utiliser http://www.w3.org/TR/css3-color/#rgba-color , exemple (Essayez-le sur - jsFiddle ):

/* Webkit */
background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, rgba(0,0,0,0.0)), /* Top */
    color-stop(0, rgba(0,0,0,1.0)) /* Bottom */
);

/* Gecko */
background: -moz-linear-gradient(
    center bottom,
    rgba(0,0,0,1.0) 0%, /* Bottom */
    rgba(0,0,0,0.0) 100% /* Top */
);
16
antonj

non testé, mais cela devrait fonctionner (dans FF cela fonctionne (avec une syntaxe différente) - je ne sais pas si safari/webkit connaît rgba):

-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(0,0,0,0)));
2
oezi