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

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

王林

Libérer： 2020-06-10 09:17:11

avant

4948 Les gens l'ont consulté

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

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>

Copier après la connexion

<🎜. >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);

Copier après la connexion

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);

Copier après la connexion

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>

Copier après la connexion

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.