Comment définir la couleur d'arrière-plan pour qu'elle soit transparente en CSS ? Introduction à deux méthodes de définition de la transparence des couleurs d'arrière-plan en CSS

Dans la mise en page d'une page Web, parfois pour la beauté générale de la page Web, il peut être nécessaire de définir certaines parties de la page Web pour qu'elles aient une couleur d'arrière-plan transparente. Alors, comment définir la couleur d'arrière-plan pour qu'elle soit transparente ? Cet article vous expliquera comment définir la couleur d'arrière-plan pour qu'elle soit transparente à l'aide de CSS.

Il existe deux façons de définir la transparence de la couleur d'arrière-plan en CSS : L'une consiste à la définir via rgba, et l'autre consiste à la définir via le fond et l'opacité.

Jetons un coup d'œil aux exemples spécifiques de ces deux méthodes en CSS pour obtenir respectivement une couleur d'arrière-plan transparente

1 Définissez la couleur d'arrière-plan pour qu'elle soit transparente via le fond et. opacité

La valeur de l'attribut dans l'attribut background est relativement simple, je n'entrerai donc pas dans les détails ici. Vous pouvez vous référer au manuel d'étude CSS pour en savoir plus. Jetons un bref coup d'œil à l'attribut d'opacité ici.

attribut d'opacité L'"opacité" du paramètre est représentée par un nombre, allant de 0,0 à 1,0, entièrement transparent est 0,0, entièrement opaque est 1,0, en d’autres termes, un nombre plus élevé signifie que l’élément est plus opaque. En plus des paramètres "opacité", il existe également des paramètres d'héritage Hérite des propriétés de la couche parent, mais la prise en charge du navigateur est médiocre et n'est pas recommandée.

Après avoir lu l'introduction des deux attributs, regardons un exemple spécifique de définition de la transparence de la couleur d'arrière-plan via le fond et l'opacité

Le code est le suivant :

<div class="box"></div>

.box{
  width:300px; 
  height:200px; 
  margin:0 auto; 
  border:1px solid #ccc; 
  background:red; 
  opacity:0.2;  
}

L'effet de transparence de la couleur d'arrière-plan est le suivant :

Instructions : Définissez la transparence de la couleur d'arrière-plan via le fond et l'opacité. S'il y a du texte sur l'arrière-plan, le. le texte deviendra également transparent. L'effet est comme celui-ci

Cela dépend donc de la situation d'utiliser cette méthode pour définir la couleur d'arrière-plan pour qu'elle soit transparente.

Articles connexes recommandés :
1. Comment obtenir une transparence d'arrière-plan avec CSS dans la conception Web ? (Exemple)
2.Deux façons d'obtenir une couleur d'arrière-plan translucide avec CSS
3. Comment définir la transparence en CSS ? Deux méthodes de définition de la transparence (exemples de code)
Tutoriels vidéo associés :
1.Tutoriel vidéo CSS - Jade Girl Heart Sutra Edition

2. Définissez la couleur d'arrière-plan pour qu'elle soit transparente via la méthode rgba

La couleur dite RGBA est constituée des trois couleurs primaires de RVB plus ALPHA. Fournit des propriétés de transparence tout en ajoutant de la couleur à l'arrière-plan.

Utilisation : background:rgba(R,G, B, A);

Regardons un exemple spécifique de définition de la transparence de la couleur d'arrière-plan via rgba :

<div class="title_div">背景颜色透明</div>

.title_div{ 
  width: 200px;
        height: 200px; 
        line-height: 30px;
        text-align: center;
         margin:0 auto;
         background-color:rgba(220,38,38,0.2);
}

L'effet de la définition de la transparence de la couleur d'arrière-plan dans la méthode rgba est le suivant :

Explication : En définissant la transparence de la couleur d'arrière-plan dans la méthode rgba, vous pouvez définir la couleur d'arrière-plan être transparent et le texte opaque, mais ceci La compatibilité de cette méthode n'est pas bonne et n'est pas compatible avec le navigateur IE

Cet article se termine ici Pour plus de connaissances sur CSS, vous pouvez vous référer au php. Site Web chinoistutoriel vidéo CSS, tutoriel vidéo CSS3, manuel d'apprentissage CSS et apprentissage CSS3 manuel pour une étude plus approfondie.

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!