Comment définir la transparence en CSS ? Deux façons de définir la transparence (exemples de code)-tutoriel CSS-php.cn

Comment définir la transparence en CSS ? Deux façons de définir la transparence (exemples de code)

青灯夜游

Libérer： 2019-11-26 16:57:05

original

81228 Les gens l'ont consulté

Lors du développement de mises en page sur des pages frontales, afin de présenter différents effets aux utilisateurs, il est souvent nécessaire de définir la transparence. Alors, comment la transparence est-elle définie en CSS ? Ce chapitre vous présente deux méthodes de définition de la transparence à l'aide de CSS (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Manuel recommandé :manuel en ligne CSS

1. >

Grammaire :

rgba（R,G,B,A）;

Copier après la connexion

RGBA représente les trois mots Red (rouge) Green (vert) Blue (bleu) et Alpha (opacité) abréviation. Les valeurs de couleur RVBA sont une extension des valeurs de couleur RVB avec un canal alpha – qui spécifie l'opacité de l'objet.

Introduction aux valeurs dans rgba() :

R : valeur rouge. Entier positif (0~255)

G : valeur verte. Entier positif (0~255)

B : valeur bleue. Entier positif (0~255)

A : Transparence. La valeur est comprise entre 0~1

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

Exemple de code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>rgba()</title>
		<style>
			.demo{
				width: 350px;
				height: 300px;
				margin: 50px auto;
			}
			.demo *{
				width: 120px;
				height: 120px;
				margin: 10px;
				float: left;
			}
			.demo1{
				background:rgba(255,0,0,1);
			}
			.demo2{
				background:rgba(255,0,0,0.5);
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1">背景色不透明，文字不透明！</div>
			<div class="demo2">背景色半透明，文字不透明！</div>
		</div>
	</body>
</html>

Copier après la connexion

Rendu :

Comment définir la transparence en CSS ? Deux façons de définir la transparence (exemples de code)

Dans l'exemple ci-dessus, les valeurs de couleur définies sont pareil, seule la transparence est différente. De cette façon, nous ne pouvons voir aucune différence autre que la couleur. Nous définissons également une couleur d'arrière-plan sur la démo du conteneur parent, qui ressemble à ceci :

Comment définir la transparence en CSS ? Deux façons de définir la transparence (exemples de code)

Comme vous. peut voir : La transparence de la première case (démo1) n'est pas définie, et la couleur rouge recouvre complètement la couleur de la case ci-dessous (démo) ; la transparence de la deuxième case (démo2) est définie, rendant la couleur semi-transparente ; , et la couleur de la boîte ci-dessous (démo) n'est pas recouverte par la couleur rouge. La couleur est entièrement recouverte, mais mélangée.

2. Définir la transparence de l'arrière-plan avec l'attribut d'opacité CSS

Syntaxe :

opacity: value ;

Copier après la connexion

valeur : Spécifiez pas de transparence, de 0,0 (entièrement transparent) à 1,0 (entièrement opaque).

L'attribut opacity est hérité et rendra tous les éléments du conteneur transparents

Exemple de code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>opacity属性</title>
		<style>
			.demo{
				width: 280px;
				height: 140px;
				margin: 50px auto;
			}
			.demo1,.demo2{
				width: 120px;
				height: 120px;
				margin: 10px;
				float: left;
				background:#2DC4CB;
			}
			.demo1{
				opacity:1;
			}
			.demo2{
				opacity:0.5;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1">
				<p>背景色不透明，文字不透明！</p>
			</div>
			<div class="demo2">
				<p>背景色透明，文字也透明！</p>
			</div>
		</div>
	</body>
</html>

Copier après la connexion

Rendu :

Comment définir la transparence en CSS ? Deux façons de définir la transparence (exemples de code)

opacity:0.5; rend tous les éléments du conteneur demo2 translucides.

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

Résumé :

méthode rgba() et méthode d'opacité bien que les deux puissent obtenir des effets de transparence, mais rgba() n'agit que sur la couleur de l'élément ou sur sa couleur d'arrière-plan (les éléments enfants de l'élément avec le jeu de transparence rgb() n'hériteront pas de son effet de transparence tandis que l'opacité est un héritage) ; et agit sur l'élément lui-même, rendra également transparents tous les éléments enfants de l'élément. Quant à la méthode à utiliser dans quel scénario, cela dépend des besoins réels. J'espère que ce tutoriel simple pourra vous aider !

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment définir la transparence en CSS ? Deux façons de définir la transparence (exemples de code)