web-dev-qa-db-fra.com

Devez-vous utiliser rgba (0, 0, 0, 0) ou rgba (255, 255, 255, 0) pour la transparence en CSS?

Devez-vous utiliser rgba(0, 0, 0, 0) ou rgba(255, 255, 255, 0) pour la transparence en CSS?

Quels sont les avantages et les inconvénients de chacun?

csscss3colors
33
Joe

Le dernier paramètre de la fonction rgba() est le paramètre "alpha" ou "opacité". Si vous le définissez sur 0, Cela signifiera "complètement transparent" et les trois premiers paramètres (les canaux red, green et blue) seront gagnés. Peu importe parce que vous ne pourrez pas voir la couleur de toute façon.

Dans cet esprit, je choisirais rgba(0, 0, 0, 0) parce que:

  1. c'est moins taper,
  2. il garde quelques octets supplémentaires en dehors de votre fichier CSS, et
  3. vous verrez un problème évident si la valeur alpha change en un élément indésirable.

Vous pourriez éviter le modèle rgba et utiliser le mot clé transparent à la place, ce qui, selon w3 .org , équivaut à "noir transparent" et doit être calculé comme suit: rgba(0, 0, 0, 0). Par exemple:

h1 {
    background-color: transparent;
}

Cela vous épargne encore quelques octets alors que vos intentions d'utiliser la transparence sont évidentes (au cas où vous ne connaissez pas RGBA).

A partir de CSS3, vous pouvez utiliser le mot clé transparent pour toute propriété CSS acceptant une couleur.

62
Cᴏʀʏ

Il existe deux manières de stocker une couleur avec alpha. La première est exactement telle que vous la voyez, avec chaque composant tel quel. La seconde consiste à utiliser alpha pré-multiplié , où les valeurs de couleur sont multipliées par l'alpha après l'avoir converti dans la plage 0.0-1.0; ceci est fait pour rendre composition plus facile. Normalement, vous ne devriez pas remarquer ni faire attention à la manière mise en œuvre par un moteur particulier, mais vous pouvez le faire dans certains cas, par exemple si vous essayez d'augmenter l'opacité de la couleur. Si vous utilisez rgba(0, 0, 0, 0), vous aurez moins de chances de voir une différence entre les deux approches.

9
Mark Ransom

Il y a une petite différence lorsque vous utilisez rgba (255,255,255, a), la couleur d'arrière-plan devient de plus en plus claire à mesure que la valeur de 'a' augmente de 0,0 à 1,0. Où que, lorsque vous utilisez rgba (0,0,0, a), la couleur de fond devient de plus en plus sombre à mesure que la valeur de 'a' augmente de 0,0 à 1,0. Cela dit, il est clair que (255,255,255,0) et (0,0,0,0) rendent l’arrière-plan transparent. (255,255,255,1) rendrait le fond complètement blanc alors que (0,0,0,1) rendrait le fond complètement noir.

3
Rahul Goyal