Exemple d'utilisation de RGBa pour ajuster la transparence en CSS3

Cet article présente un tutoriel sur l'utilisation de RGBa pour ajuster la transparence dans CSS3. RGBA est une extension du modèle de couleur RVB Cette abréviation représente la première des trois couleurs primaires. de rouge, vert et bleu. Les lettres et les valeurs Alpha représentent la transparence ou l'opacité d'une couleur. Les amis dans le besoin peuvent se référer à

En CSS3, un attribut d'opacité

a été ajouté. , permettant aux développeurs de définir la transparence des éléments. Désormais, l'opacité est prise en charge par les navigateurs modernes traditionnels, mais l'opacité définira l'élément défini et ses sous-éléments sur la même transparence en même temps. Ces règles de transparence sont assez rigides et souvent. rencontrer beaucoup de problèmes dans le développement réel. En fait, il existe une autre solution de transparence des couleurs dans CSS3 : RGBa. Par rapport à l'opacité, RGBa peut définir la transparence sur un seul élément sans affecter ses sous-éléments. Cependant, la prise en charge du navigateur par RGBa n'est pas aussi étendue que l'opacité, elle a donc attiré relativement peu l'attention des développeurs.

RGBA(R,G,B,A)

Valeur :
R : valeur rouge. Positif
Entier | PourcentG : Valeur verte. Entier positif | Pourcentage
B : valeur bleue. Entier positif | Pourcentage
A : transparence alpha. La valeur est comprise entre 0 et 1.
Ce qui suit est blanc en utilisant rgba() pour définir une transparence de 50 %.

p {   
color: rgba(255, 255, 255, 0.5);   
}

RGBA est une extension du modèle de couleur RVB. Cet acronyme représente les premières lettres des trois couleurs primaires rouge, vert et bleu, et la valeur alpha représente la transparence/opacité de la couleur.

Ce qui suit est une introduction détaillée aux couleurs RGBa.

1. Base de couleur RVBA
RGBa ajoute essentiellement un canal alpha aux éléments définis, c'est-à-dire en plus des trois canaux de couleur rouge, vert et bleu. un canal représentant la transparence, dans lequel la valeur RVB utilise les trois entiers familiers de 0 à 255 pour représenter respectivement le rouge, le vert et le bleu, tandis que la valeur alpha est de 0 à 1 (une décimale). Voici un exemple pour illustrer son utilisation spécifique :

Dans CSS 2.1, l'utilisation des déclarations de couleurs RVB est prise en charge (bien que les développeurs puissent être plus habitués à utiliser une représentation hexadécimale telle que #343434), par exemple Pour définir la couleur d'arrière-plan #343434 pour l'élément p avec l'identifiant de l'exemple, vous pouvez écrire

/* RGB 表示方式 */
#example {background: rgb(52, 52, 52); }

puis utiliser RGBa pour changer la couleur d'arrière-plan dans l'exemple pour avoir une transparence de 0,5.

/* 设置 0.5 透明度 */
#example-a {background: rgba(52, 52, 52, 0.5); }   
/* 也可以省略小数点前的 0 */
#example-a {background: rgba(52, 52, 52, .5); }

Les effets avant et après l'ajout de transparence sont les suivants (afin de refléter plus clairement l'effet de transparence, le corps de l'exemple a une texture de fond ajoutée) :

Vous pouvez voir qu'il s'avère que RGBa ajoute simplement un paramètre au RVB d'origine. Bien que ce changement soit minime, il offre aux développeurs une grande commodité.

De plus, en plus de l'attribut background, RGBa peut également être utilisé dans les attributs color et b

order (Remarque : l'utilisation de RGBa pour l'attribut border dans Firefox sera différente de que dans d'autres navigateurs L'effet est légèrement différent).

2. Prise en charge du navigateur et amélioration progressive
Bien que RGBa ait reçu un bon support dans les navigateurs modernes grand public, la prise en charge de RGBa par Webkit est la plus ancienne,Chrômeome a a commencé à prendre en charge RGBa depuis au moins la version 0.415. À cet égard, Chrome peut être considéré comme très puissant. De plus, les noyaux Gecko et Presto ont également progressivement implémenté la prise en charge de RGBa depuis IE9. Une prise en charge plus spécifique du navigateur est la suivante :

Chrome 0.4.154.33, Firefox 3.0, Safari 3.2.1, Opera 10.10, IE9

Pour une prise en charge plus détaillée du navigateur, veuillez vous référer ici.

Pour les navigateurs qui ne prennent pas en charge RGBa, une solution d'amélioration progressive peut être utilisée. Kayo recommande une solution qui spécifie une couleur réservée. Tout d'abord, les développeurs doivent savoir que les navigateurs qui ne prennent pas en charge RGBa traiteront les valeurs des propriétés CSS utilisant RGBa comme une

erreur de syntaxe et ignoreront donc le paramètre de propriété CSS. Par conséquent, les développeurs peuvent d'abord définir un attribut qui n'utilise pas la transparence avant de définir la couleur RGBa pour éviter la situation d'absence de couleur du tout lorsque le navigateur ne prend pas en charge RGBa. Ce qui suit est une explication détaillée de l'exemple ci-dessus :

#example1 {background: rgb(52, 52, 52); background: rgba(52, 52, 52, .5); ne prend pas en charge RGBa Le navigateur ignorera le deuxième paramètre d'attribut d'arrière-plan et définira la couleur d'arrière-plan de l'élément en fonction de la valeur du premier attribut. Bien que l'effet entre les navigateurs ne puisse pas être le même, il a obtenu un effet similaire et reflète une bonne solution d'amélioration progressive. .

Bien sûr, pour IE, vous pouvez utiliser des filtres pour obtenir le même effet que dans les navigateurs prenant en charge RGBa. Par exemple : pour l'exemple ci-dessus, vous pouvez écrire le code comme suit

<. 🎜>Notez ici que le filtre utilise la même couleur et la même transparence que dans l'exemple ci-dessus, mais utilise une représentation hexadécimale.

IE 会忽略 RGBa 颜色设置，并且根据 filter 滤镜设置颜色，这样的效果与 RGBa 的效果相同。

三. 不影响子元素
在文章的开头已经介绍过，RGBa 相对 opacity 的优势是不会影响其子元素，即可以单独为被设置的元素设置透明度，而子元素而不受该设置影响。下面再例举一个具体的例子，分别以 RGBa 和 opacity 为元素设置透明度说明两者的区别。

完整代码：

<!DOCTYPE HTML>   
<html lang="zh-CN">   
<head>   
    <meta charset="UTF-8">   
    <title>RGBa 与 opacity 效果的区别</title>   
    <style type="text/css">   
        body {padding-top: 200px; background: url(bg.png); }   
        #example, #example-a {width: 200px; height: 100px; margin: 0 auto; }   
        #example {background: rgb(52, 52, 52); opacity: 0.5; }   
        #example-a {margin-top: 20px; background: rgba(52, 52, 52, .5); }   
        .inside {display: block; width: 50px; height: 50px; margin-left: 10px; background: rgb(100, 140, 180); }   
    </style>   
</head>   
<body>   
    <p id="example">   

        <span class="inside"></span>   

    </p>   

    <p id="example-a">   

        <span class="inside"></span>   

    </p>   
</body>   
</html>

具体效果

可以看出，opacity 会使其中的子元素 span 同时变为半透明的效果，而 RGBa 则只改变被设置的元素的透明度，而在大多数情况下，开发者只需要设置当前元素的透明度（如遮罩，半透明背景等），因此使用 RGBa 会更加的灵活。

另外，在 IE9 中，直接使用 RGBa 颜色与使用 opacity 设置透明的效果会有差异（读者可以在 IE9 下浏览 Demo 查看具体的效果），开发者需要注意这一点差异。

相关文章：

CSS设定一个元素半透明

CSS3教程(8):CSS3透明度指南

实现CSS3不透明度完整代码

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!