Quels sont les attributs d'arrière-plan couramment utilisés en CSS3
青灯夜游
Libérer: 2022-01-12 18:05:29
original
4175 Les gens l'ont consulté
Les attributs d'arrière-plan couramment utilisés sont : 1. background-color ; 2. background-image ; 3. background-repeat ;
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Lors de la création de pages Web, nous devons souvent ajouter des couleurs d'arrière-plan et des images d'arrière-plan aux pages Web pour rendre les pages Web plus belles et attirer l'attention des visiteurs. CSS fournit une série de propriétés pour définir l'effet d'arrière-plan des éléments HTML, comme suit :
background-color : définit la couleur d'arrière-plan de l'élément
background-image : définit l'image d'arrière-plan de l'élément ; -repeat : Contrôle si l'image d'arrière-plan est répétée ;
background-attachment : Contrôle si l'image d'arrière-plan défile avec la fenêtre ;
background-position : Contrôle la position de l'image d'arrière-plan dans l'élément ; Définissez la taille de l'image d'arrière-plan ;
background-origin : définissez l'attribut background-position par rapport à la position pour positionner l'image d'arrière-plan ;
background-clip : définissez la zone d'affichage de l'image d'arrière-plan ; : Abréviation des attributs d'arrière-plan, vous pouvez définir tous les attributs d'arrière-plan dans une seule instruction .
1. background-color
Vous pouvez utiliser l'attribut background-color pour définir une couleur d'arrière-plan pour l'élément, qui prend en charge les valeurs d'attribut suivantes :
value
description[Exemple] Utilisez background-color pour définir la couleur d'arrière-plan de l'élément :
1
复制纯文本复制
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
color_name
Utilisez Définissez la couleur d'arrière-plan de l'élément avec un nom de couleur spécifique (par exemple rouge)
hex_number
Utilisez le code hexadécimal pour définir la couleur d'arrière-plan de l'élément (par exemple #ff0000)
rgb_number
Utilisez le rgb () fonction pour définir la couleur d'arrière-plan de l'élément Couleur d'arrière-plan (par exemple rgb(255,0,0))
transparent
Valeur par défaut, définissez la couleur d'arrière-plan sur transparent, dans la plupart des cas nous ne l'utiliserons pas . Mais si vous ne souhaitez pas qu'un certain élément ait une couleur d'arrière-plan, ou si vous ne souhaitez pas que les paramètres du navigateur de l'utilisateur (tels que l'activation du mode nuit, le mode de protection des yeux) affectent votre conception, vous pouvez utiliser transparent pour définir la couleur devient transparente
inherit
Héritez le paramètre de couleur d'arrière-plan de l'élément parent
Image : démonstration de l'attribut background-color
Il ressort des résultats d'exécution que l'attribut background-color peut définir un arrière-plan de couleur unie pour l'élément. remplit le contenu, le remplissage et la zone de bordure de l'élément (cela peut également être compris comme la bordure et toutes les zones qu'elle contient) et n'a aucun effet sur la zone en dehors de la bordure de l'élément (marges).
2. background-imagebackground-image est utilisé pour définir l'image d'arrière-plan d'un élément. Par défaut, le navigateur commencera à partir du coin supérieur gauche du contenu de l'élément (s'il y a un remplissage, il commencera à partir du coin supérieur gauche). coin gauche de la zone de remplissage de l'élément Début), répétez l'image d'arrière-plan horizontalement et verticalement pour remplir toute la zone de l'élément, vous pouvez utiliser la propriété background-repeat pour contrôler si ou comment l'image d'arrière-plan se répète. Les valeurs facultativesde l'attribut
background-image sont les suivantes :
valeur
description
url('URL')
Le chemin pointant vers l'image, vous pouvez pensez à url() comme fonction, L'URL entre parenthèses est le chemin spécifique de l'image
aucun
Valeur par défaut, l'image d'arrière-plan n'est pas affichée
hériter
Hériter le paramètre de l'image d'arrière-plan de l'élément parent
left top(左上)、 left center(左中)、 left bottom(左下)、 right top(右上)、 right center(右中)、 right bottom(右下)、 center top(中上)、 center center(居中)、 center bottom(中下)
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