Maison > Article > interface Web > Comment définir la transparence de l'arrière-plan en CSS

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

王林avant: 2020-08-29 16:06:443182parcourir

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>

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

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, 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!

css css3 background

Déclaration：

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

Article précédent：Quelles sont les utilisations de @ en CSSArticle suivant：Quelles sont les utilisations de @ en CSS

Articles Liés

Voir plus