Maison > Article > interface Web > Trois façons d'obtenir la transparence de l'arrière-plan en CSS

Trois façons d'obtenir la transparence de l'arrière-plan en CSS

王林avant: 2020-06-10 09:17:114872parcourir

Il existe généralement trois façons d'obtenir une transparence d'arrière-plan en CSS. Voici les façons d'écrire l'opacité de ces trois manières à 80 % :

Opacité :x. de css3 , la valeur de x est de 0 à 1, comme l'opacité : 0,8

rgba(rouge, vert, bleu, alpha) de css3, la valeur de alpha est de 0 à 1, comme rgba (255,255,255,0.8)

Filtre de filtre exclusif IE :Alpha(opacity=x), la valeur de x est comprise entre 0 et 100, comme filter:Alpha(opacity=80)

( Tutoriel vidéo recommandé : tutoriel vidéo CSS)

1. Opacité du CSS3

Compatibilité : IE6, 7 et 8 ne sont pas pris en charge, mais IE9 et supérieur et les navigateurs standards sont Support

Instructions d'utilisation : Tous les éléments descendants de l'élément opacity seront définis pour être transparents ensemble. Il est généralement utilisé pour ajuster l'opacité globale de l'image ou du module

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明度</title>
<style>
.demo{
  padding: 25px;
  background-color:#000000;
  filter:alpha(opacity:50); opacity:0.5;  -moz-opacity:0.5;-khtml-opacity: 0.5;
}
.demo p{
    color: #FFFFFF;
}
</style>
</head>
<body>    
 
<div class="demo">
    <p>背景透明，文字也透明</p>
</div>
</body>
</html>

Après avoir utilisé l'opacité, tout le module sera transparent, l'effet est le suivant :

Trois façons dobtenir la transparence de larrière-plan en CSS Ensuite il est déconseillé d'utiliser l'opacité pour obtenir "fond transparent, texte opaque" .

2. rgba de css3

La couleur dite RGBA, comme son nom l'indique, est la couleur de R+G+B+A, et plus spécifiquement c'est rouge+vert+bleu+ La couleur de l'alpha, traduite en couleur transparente rouge + vert + bleu + Alpha.

background:rgba(200, 54, 54, 0.5);

Parmi eux, le 0 devant 0,5 indiquant la translucidité peut être omis, ou directement .5 est également acceptable.

Compatibilité : IE6, 7 et 8 ne sont pas pris en charge, mais IE9 et supérieur et les navigateurs standard sont pris en charge

Comment résoudre le problème selon lequel le navigateur IE8 ne prend pas en charge rgba :

background:rgba(0,0,0,0.5); filter: 
progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

Mode d'emploi : Définissez l'opacité de la couleur, généralement utilisée pour ajuster l'opacité de la couleur d'arrière-plan, de la couleur, de l'ombre de la boîte, etc.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3的rgba</title>
<style>
.demo{
  padding: 25px;
  background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
  background-color:rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */
}
.demo p{
    color: #FFFFFF;
}
</style>
</head>
<body>    
<div class="demo">
    <p>背景透明，文字也透明</p>
</div>
</body>
</html>

Utilisez rgba dans background-color. Dans les navigateurs standards, l'arrière-plan est transparent et le texte est opaque L'effet est le suivant :

Trois façons dobtenir la transparence de larrière-plan en CSS Ensuite. utilisez rgba pour obtenir la transparence de l'arrière-plan, l'opacité du texte est souhaitable.

Tutoriel recommandé :

Démarrage rapide CSS

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Plusieurs utilisations des sélecteurs d'attributs CSS3 (exemples de code)Article suivant：Plusieurs utilisations des sélecteurs d'attributs CSS3 (exemples de code)

Articles Liés

Voir plus