Comment utiliser l'attribut transparent pour définir la transparence en CSS ? La propriété transparente dessine différents triangles (exemple de code)-tutoriel CSS-php.cn

Comment utiliser l'attribut transparent pour définir la transparence en CSS ? La propriété transparente dessine différents triangles (exemple de code)

青灯夜游

Libérer： 2018-09-25 14:50:48

original

11586 Les gens l'ont consulté

Lorsque vous pensez utiliser CSS pour définir la transparence des éléments, votre première réaction est d'utiliser l'attribut Opacity pour définir la transparence. En fait, il existe d'autres façons de définir la transparence en CSS. Ce chapitre vous présentera l'utilisation de l'attribut transparent pour définir la transparence et l'utilisation de l'attribut transparent pour dessiner divers triangles. 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.

Alors, pouvez-vous demander ce qu'est l'attribut CSS transparent et à quoi il sert ?

En fait, css transparent est un raccourci pour noir entièrement transparent (noir), c'est-à-dire une valeur comme rgba(0,0,0,0) ; il est utilisé pour spécifier une couleur entièrement transparente.

Par exemple :

Nous définissons en css : background:transparent, ce qui signifie définir l'arrière-plan pour qu'il soit transparent.

Cependant, en fait, la couleur par défaut du fond est l'attribut transparent, donc c'est pareil qu'il soit écrit ou non. Alors pourquoi avons-nous parfois besoin de définir l’arrière-plan sur transparent ? Dans quels scénarios la transparence est-elle généralement utilisée :

Si un élément recouvre un autre élément et que vous souhaitez afficher l'élément en dessous, vous devez alors définir l'arrière-plan de l'élément ci-dessus sur transparent

Utilisation de l'attribut transparent sous différentes versions de CSS :

En css1, transparent est utilisé comme valeur de paramètre de background-color pour indiquer que l'arrière-plan est transparent.

En CSS2, border-color commence également à accepter transparent comme valeur de paramètre. "Open eBook(tm) Publication Structure 1.0.1" [OEB101] s'étend à la couleur et accepte également transparent comme valeur de paramètre.

En CSS3, transparent est étendu à tout attribut ayant une valeur de couleur.

Jetons un coup d'oeilCompatibilité :

Comment utiliser lattribut transparent pour définir la transparence en CSS ? La propriété transparente dessine différents triangles (exemple de code)

#1 : border-color n'accepte pas cette valeur

#2 : la couleur n'accepte pas cette valeur ;

L'attribut transparent dessine divers triangles (utilisé avec l'attribut border)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.demo {
				margin: 40px auto;
				width:800px;
				/*background-color: #f0ac6b;*/
			}
			.demo *{
				float: left;
				margin: 20px 30px;
				width: 0px;
				height: 0px;
			}
			
			.t1 {
				/*background-color: #f0ac6b;*/
				border-bottom: 40px solid red;
				border-right: 20px solid transparent;
				border-left: 20px solid transparent;
			}
			
			.t2 {
				/*background-color: #f0ac6b;*/
				border-bottom: 40px solid transparent;
				border-right: 40px solid red;
				/*border-left: 20px solid transparent;*/
			}
			
			.t3 {
				border-top: 40px solid red;
				border-right: 20px solid transparent;
				border-left: 20px solid transparent;
			}
			
			.t4 {
				border-top: 40px solid transparent;
				border-left: 40px solid red;
			}
			
			.t5 {
				border-top: 40px solid red;
				border-right: 40px solid transparent;
			}
			
			.t6 {
				border-left: 40px solid transparent;
				border-bottom: 40px solid red;
			}
			
			.t7 {
				border-left: 40px solid red;
				border-bottom: 20px solid transparent;
				border-top: 20px solid transparent;
			}
			
			.t8 {
				border-right: 40px solid red;
				border-bottom: 20px solid transparent;
				border-top: 20px solid transparent;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<div class="t1"></div>
			<div class="t3"></div>
			<div class="t2"></div>
			<div class="t4"></div>
			<div class="t5"></div>
			<div class="t6"></div>
			<div class="t7"></div>
			<div class="t8"></div>
		</div>
	</body>

</html>

Copier après la connexion

Rendu :

Comment utiliser lattribut transparent pour définir la transparence en CSS ? La propriété transparente dessine différents triangles (exemple de code)

Résumé : Ce qui précède est une introduction à l'attribut transparent et un exemple d'utilisation de l'attribut transparent. L'exemple est très simple, vous pouvez l'essayer.

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 utiliser l'attribut transparent pour définir la transparence en CSS ? La propriété transparente dessine différents triangles (exemple de code)