Comment définir la transparence en CSS en utilisant trois méthodes-tutoriel CSS-php.cn

Comment définir la transparence en CSS en utilisant trois méthodes

青灯夜游

Libérer： 2023-01-04 09:34:36

original

43340 Les gens l'ont consulté

Méthode : 1. Ajoutez le style "background-color:rgba(R,G,B,A)" à l'élément pour définir la transparence des couleurs. 2. Ajoutez le style "opacity:transparent value;" à l'élément pour définir la transparence ; 3. Définissez le style "filter:opacity(%);" sur l'image pour augmenter la transparence.

Comment définir la transparence en CSS en utilisant trois méthodes

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Il existe trois façons de définir la transparence en CSS :

rgba()
opacityAttribut
filter:opacity(%)

Méthode 1 : la fonction rgba()

la fonction rgba() peut définir le couleur Transparence, la syntaxe est la suivante :

RGBA(R,G,B,A)

Copier après la connexion

Valeur :

R : Valeur rouge. Entier positif | Pourcentage
G : Valeur verte. Entier positif | Pourcentage
B : valeur bleue. Entier positif | Pourcentage
A : transparence alpha. La valeur est comprise entre 0 et 1.

Par exemple : rgba(255,0,0,0.5)Rouge translucide

rgba() permet de définir simplement la transparence des couleurs, qui a de nombreuses applications en mise en page. Par exemple : rendez l'arrière-plan transparent, mais le texte au-dessus est opaque.

Exemple :

background-color:rgba(0,152,50,0.7);// -->70%的不透明度
background-color:transparent;支持完全透明

Copier après la connexion

Comment définir la transparence en CSS en utilisant trois méthodes

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

Méthode 2 : Utilisez l'attribut opacity

En CSS3, un attribut d'opacité est ajouté. Vous pouvez utiliser cet attribut pour définir la transparence de l'élément. L'attribut opacity est hérité et rendra tous les éléments du conteneur transparents ;

Syntaxe :

opacity: value ;

Copier après la connexion

valeur : Spécifie l'opacité, de 0,0 (entièrement transparent) à 1,0. (entièrement opaque).

Exemple :

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>opactity</title>
   <style>
   .box1{
       position:relative;
       width:200px;height:200px;
       background-color: #00f;
   }
        .box2{
             position:absolute;
             top:80px;
             left:80px;
             width:200px;
             height:200px;
             background-color:#0f0;
      }
      .box3{
            position:relative;
             width:200px;
             height:200px;
             background-color:#f00;
             z-index:1;
}
</style>
</head>
<body>
   <div></div>
      <div></div>
      <div></div>
</body>
</html>

Copier après la connexion

Comment définir la transparence en CSS en utilisant trois méthodes

L'effet du réglage de la transparence

.box1{
                position:relative;
            width:200px;height:200px;
           background-color: #00f;
           z-index:10;
           opacity:0.5;
    }
         .box2{
              position:absolute;
              top:80px;
              left:80px;
              width:200px;
              height:200px;
              background-color:#0f0;
              z-index:5;
              opacity:0.5;
       }
       .box3{
              position:relative;
              width:200px;
              height:200px;
             background-color:#f00;
            z-index:1;
              opacity:0.5;
}

Copier après la connexion

Effet de performance :

Comment définir la transparence en CSS en utilisant trois méthodes

Méthode 3 : Définir le style filter:opacity(%) pour définir la transparence de l'image

L'attribut de filtre consiste à appliquer l'effet de filtre aux éléments du Méthode CSS de page Web (principalement Image) ; vous pouvez définir l'effet d'opacité de l'image en définissant la valeur opacity(). Une opacité de 0 % signifie que l'élément est complètement transparent, et si l'opacité est de 100 %, cela signifie l'image originale.

Syntaxe :

filter: opacity(%);

Copier après la connexion

Exemple :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>

			.opacity1 {
				opacity: 0.5;
				filter: none;
			}
			.opacity2 {
				opacity: 0.2;
				filter: none;
			}
		</style>
	</head>

	<body>
		<div>
			正常图片:<br /><br />
			<img  src="1.jpg"    style="max-width:90%" / alt="Comment définir la transparence en CSS en utilisant trois méthodes" ></div><br />
		<div>
			设置透明度的图片：<br /><br />
			<img  class="opacity1" src="1.jpg"    style="max-width:90%" / alt="Comment définir la transparence en CSS en utilisant trois méthodes" >
			<img  class="opacity2" src="1.jpg"    style="max-width:90%" / alt="Comment définir la transparence en CSS en utilisant trois méthodes" >
		</div>
	</body>

</html>

Copier après la connexion

Rendu :

Comment définir la transparence en CSS en utilisant trois méthodes