Maison > interface Web > tutoriel CSS > Comment effacer la couleur d'arrière-plan en CSS

Comment effacer la couleur d'arrière-plan en CSS

王林
Libérer: 2023-01-06 11:14:13
original
6260 Les gens l'ont consulté

La façon d'effacer la couleur d'arrière-plan en CSS consiste à ajouter l'attribut background-color à l'arrière-plan et à définir la valeur de l'attribut sur transparent, afin que la couleur d'arrière-plan soit effacée, comme [background-color: transparent ].

Comment effacer la couleur d'arrière-plan en CSS

L'environnement d'exploitation de cet article : système Windows 10, CSS 3, ordinateur thinkpad t480.

Si nous voulons effacer la couleur d'arrière-plan, nous pouvons utiliser l'attribut background-color pour rendre la couleur d'arrière-plan transparente, effaçant ainsi la couleur d'arrière-plan.

L'attribut background-color définit la couleur d'arrière-plan de l'élément.

Remarque :

La propriété background-color définit une couleur unie pour l'élément. Cette couleur remplit le contenu, le remplissage et les zones de bordure de l'élément, s'étendant jusqu'aux limites extérieures de la bordure de l'élément (mais pas les marges). Si la bordure comporte des parties transparentes (comme une bordure en pointillés), la couleur d'arrière-plan apparaîtra à travers ces parties transparentes.

Valeurs d'attribut communes :

  • color_name Spécifie que la valeur de couleur est la couleur d'arrière-plan du nom de la couleur (comme le rouge).

  • hex_number spécifie la couleur d'arrière-plan dont la valeur de couleur est une valeur hexadécimale (telle que #ff0000).

  • rgb_number spécifie la valeur de couleur comme couleur d'arrière-plan du code RVB (comme rgb(255,0,0)).

  • transparent par défaut. La couleur de fond est transparente.

  • inherit spécifie que le paramètre de l'attribut background-color doit être hérité de l'élément parent.

Exemple de code :

<html>
<head>

<style type="text/css">

body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}

p.no2 {background-color: gray; padding: 20px;}

</style>

</head>

<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>

</body>
</html>
Copier après la connexion

Tutoriel vidéo associé : Tutoriel vidéo CSS

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