Comment définir un arrière-plan transparent en HTML

青灯夜游
Libérer: 2023-02-08 14:43:16
original
40105 Les gens l'ont consulté

Comment définir un arrière-plan transparent en HTML : 1. Utilisez directement "backgroud:rgba(R,G, B, A)" pour définir un arrière-plan transparent. 2. Utilisez d'abord le style « backgroud : valeur de couleur ; » pour définir la couleur d'arrière-plan ; puis utilisez le style « opacité : valeur de transparence » pour ajouter une transparence à la couleur d'arrière-plan.

Comment définir un arrière-plan transparent en HTML

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

Définition HTML de la couleur d'arrière-plan transparente

Il existe deux façons de définir la couleur d'arrière-plan transparente en HTML : l'une consiste à la définir via la méthode rgba, L'autre passe par les paramètres d'arrière-plan et d'opacité.

1. Méthode RVB

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);
Copier après la connexion
  • Rouge (R) : représente la composante rouge de la couleur, un entier compris entre 0 et 255 (un pourcentage 0% ~ 100% peut également être utilisé) .

  • Vert (G) : représente la composante verte de la couleur, un nombre entier compris entre 0 et 255 (un pourcentage 0% ~ 100% peut également être utilisé).

  • Bleu (B) : représente la composante bleue de la couleur, un entier compris entre 0 et 255 (un pourcentage 0% ~ 100% peut également être utilisé).

  • Transparence (A) : représente la transparence, allant de 0 (complètement transparent) à 1 (complètement opaque).

Jetons un coup d'œil à un exemple spécifique de définition de la transparence de la couleur d'arrière-plan via rgba :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				line-height: 30px;
				text-align: center;
				margin: 0 auto;
			}
			.div1{
				background: rgba(220, 38, 38, 1);
			}
			.div2 {
				
				background: rgba(220, 38, 38, 0.2);
			}
		</style>
	</head>

	<body>
		<div class="div1">背景颜色,没有设置透明度</div><br />
		<div class="div2">背景颜色,设置了透明度</div>

	</body>

</html>
Copier après la connexion

Rendu :

Comment définir un arrière-plan transparent en HTML

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

La valeur de l'attribut background est relativement simple, je n'entrerai donc pas dans les détails. ici. Jetons un bref coup d'œil ici. Attribut d'opacité

L'"opacité" du paramètre d'attribut d'opacité est représentée par un nombre, allant de 0,0 à 1,0. en d’autres termes, plus le nombre est grand, plus l’élément est opaque.

En plus du paramètre "opacité", il existe également la propriété d'héritage de la couche parent. Cependant, 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 :

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				line-height: 30px;
				text-align: center;
				margin: 0 auto;
				border: 1px solid #ccc;
			}
			
			.div1 {
				background: red;
			}
			
			.div2 {
				
				background: red;
				opacity: 0.2;
			}
		</style>
	</head>

	<body>
		<div class="div1">背景颜色,没有设置透明度</div><br />
		<div class="div2">背景颜色,设置了透明度</div>

	</body>

</html>
Copier après la connexion
Rendu :


Comment définir un arrière-plan transparent en HTML

Tutoriel recommandé :

Tutoriel vidéo CSS

Manuel en ligne recommandé :

css manuel en ligne

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal