Comment définir la transparence de l'arrière-plan en CSS-tutoriel CSS-php.cn

Comment définir la transparence de l'arrière-plan en CSS

王林

Libérer： 2020-08-29 16:06:44

avant

3313 Les gens l'ont consulté

Comment définir la transparence de l'arrière-plan en CSS

Il existe de nombreuses façons d'obtenir la transparence de l'arrière-plan. Cet article présente les deux méthodes suivantes :

(tutoriels associés recommandés : Tutoriel CSS)

opacité de CSS3 : x, la valeur de 0 à 1, telle que rgba(255,255,255,0.8)

1. Opacité de CSS3

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

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'ensemble. opacité des images ou des modules.

<!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é, l'ensemble du module sera transparent, affiché comme suit :

Ensuite, il n'est pas conseillé de le faire. utilisez l'opacité pour obtenir "un arrière-plan transparent, un texte opaque". Comment définir la transparence de larrière-plan en CSS

(Tutoriel vidéo recommandé :

Tutoriel vidéo CSS

)

2. Rgba de CSS3

La couleur dite RGBA, comme son nom l'indique, est R+G+B La couleur de +A, pour être plus précis, est la couleur du rouge+vert+bleu+alpha. Traduit, c'est la couleur de la transparence 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, comme indiqué ci-dessous :

Utilisez ensuite rgba. pour obtenir une transparence d'arrière-plan, l'opacité du texte est souhaitable. Comment définir la transparence de larrière-plan en 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!