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.
| 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 |
| [Exemple] Utilisez background-color pour définir la couleur d'arrière-plan de l'élément : |
<!DOCTYPE html>
<html>
<head>
<title>CSS背景</title>
<style>
#bg {
color: white;
background-color: blue;
margin: 20px; /*设置外边距为 20px*/
padding: 20px; /*设置内边距为 20px*/
border: 10px dotted yellow; /*设置一个宽 10px 的黄色虚线边框*/
}
</style>
</head>
<body>
<p id="bg">background-color 属性</p>
</body>
</html>
background-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 | 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 | |||||||||||||||||||||||||||||
【示例】使用 background-image 属性将图片【  】设置为元素的背景图像：<!DOCTYPE html>
<html>
<head>
<title>CSS背景</title>
<style>
#bg {
color: red;
background-image: url('./bg-image.png');
margin: 20px; /*设置外边距为 20px*/
padding: 20px; /*设置内边距为 20px*/
border: 10px dotted red; /*设置一个宽 10px 的红色虚线边框*/
}
</style>
</head>
<body>
<p id="bg">background-image 属性</p>
</body>
</html>Copier après la connexion Copier après la connexion  图：background-image 属性演示 背景图像的覆盖区域与背景颜色相同，同样会填充元素的内容、内边距以及边框区域，对于元素边框以外的区域（外边距）则没有影响。 3. background-repeat默认情况下背景图像会从元素内容的左上角开始（若有内边距则从元素内边距区域的左上角开始），在水平和垂直方向上重复背景图像以填充整个元素区域（不包括元素的外边距区域），您可以使用 background-repeat 属性用来设置背景图像是否重复或如何重复，该属性的可选值如下：
【示例】使用 background-repeat 属性让背景图像只在水平方向上重复： <!DOCTYPE html>
<html>
<head>
<title>CSS背景</title>
<style>
#bg {
color: black;
background-image: url('./bg-image.png');
background-repeat: repeat-x;
margin: 20px; /*设置外边距为 20px*/
padding: 20px; /*设置内边距为 20px*/
border: 10px dotted red; /*设置一个宽 10px 的红色虚线边框*/
}
</style>
</head>
<body>
<p id="bg">background-repeat 属性</p>
</body>
</html>Copier après la connexion Copier après la connexion  图：background-repeat 属性演示 4. background-positionbackground-position 属性用来设置背景图像的起始位置，该属性的可选值如下：
【示例】使用 background-position 属性来设置背景图像的位置： <!DOCTYPE html>
<html>
<head>
<title>CSS背景</title>
<style>
#bg {
color: black;
background-image: url('./bg-image.png');
background-repeat: no-repeat;
background-position: 0% 50%;
margin: 20px; /*设置外边距为 20px*/
padding: 20px; /*设置内边距为 20px*/
border: 10px dotted red; /*设置一个宽 10px 的红色虚线边框*/
}
</style>
</head>
<body>
<p id="bg">background-position 属性</p>
</body>
</html>Copier après la connexion Copier après la connexion  图：background-position 属性演示 5. background-sizebackground-size 属性用来设置背景图像的尺寸，该属性的可选值如下：
【示例】使用 background-size 属性设置背景图像的尺寸，并将背景图像横向铺满整个元素区域： <!DOCTYPE html>
<html>
<head>
<title>CSS背景</title>
<style>
body {
background-image: url('./bg-image.png');
background-repeat: repeat-x;
background-size: contain;
}
</style>
</head>
<body>
<p>background-size 属性</p>
</body>
</html>Copier après la connexion Copier après la connexion  图：background-size 属性演示 6. backgroundbackground 是背景属性的简写形式，通过它不仅可以为元素设置某个背景属性，还可以同时设置多个或者所有的背景属性。在设置多个背景属性时并没有固定的顺序，但推荐使用如下顺序进行设置：background-color || background-image || background-position [/ background-size]? || background-repeat || background-attachment || background-origin || background-clip Copier après la connexion
【示例】通过 background 同时设置多个背景属性： <!DOCTYPE html>
<html>
<head>
<title>CSS背景</title>
<style>
#bg {
background: #ccc url('./bg-image.png') 0px 0px/contain repeat-x border-box;
margin: 20px; /*设置外边距为 20px*/
padding: 20px; /*设置内边距为 20px*/
border: 10px dotted red; /*设置一个宽 10px 的红色虚线边框*/
}
</style>
</head>
<body>
<p id="bg">background 属性</p>
</body>
</html>Copier après la connexion Copier après la connexion  图：background 属性演示 background 属性还支持设置多组属性值（比如上面示例中的 <!DOCTYPE html>
<html>
<head>
<title>CSS背景</title>
<style>
body {
background: url("./css.png") 10px 10px/60px 60px no-repeat padding-box,
url("./css.png") 50px 30px/120px 120px no-repeat content-box,
url("./css.png") 140px 40px/200px 100px no-repeat content-box #58a;
}
</style>
</head>
<body>
</body>
</html>Copier après la connexion Copier après la connexion  图：多重背景层叠效果 （学习视频分享：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!
Article précédent：Quelles sont les propriétés associées à l’animation CSS3 ?
Article suivant：Comment implémenter diverses barres de progression en utilisant uniquement HTML/CSS (organisé et partagé)
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
Derniers articles par auteur
Derniers numéros
Rendre la page adaptée aux mobiles ?
J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'ut...
Depuis 2024-04-01 20:42:38
0
1
259
Rubriques connexes
Plus>
|
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
