Arrière-plan CSS
La propriété CSS background est utilisée pour définir l'arrière-plan des éléments HTML.
Les propriétés CSS définissent les effets d'arrière-plan :
Couleur d'arrière-plan
L'attribut background-color définit la couleur d'arrière-plan de l'élément.
La couleur d'arrière-plan de la page est utilisé dans le corps Dans le sélecteur :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>我的 CSS web 页!</h1>
<p>你好！这是来自php中文网的实例。</p>
</body>
</html>Exécutez le programme pour l'essayer
En CSS, les valeurs de couleur sont généralement exprimées en Defined de la manière suivante :
Hex - tel que : "#ff0000"
RGB - tel que : "rgb(255,0, 0)"
Nom de la couleur - Par exemple : "red"
Dans l'exemple suivant, les éléments h1, p et div ont des couleurs d'arrière-plan différentes :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>CSS background-color 实例!</h1>
<div>
改文本插入在 div 元素中。
<p>该段落有自己的背景颜色。</p>
我们仍然在同一个 div 中。
</div>
</body>
</html>
Image d'arrière-plan
L'attribut background-image décrit l'arrière-plan- image de l'élément.
Par défaut, l'image d'arrière-plan effectue un affichage répété en mosaïque pour couvrir l'intégralité de l'entité de l'élément.
Exemple de paramétrage de l'image d'arrière-plan de la page :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/580837363b987802.jpg');
background-color:#cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Image d'arrière-plan - Mosaïque horizontale ou verticale
Par défaut, l'attribut background-image mosaïquera la page horizontalement ou verticalement.
Certaines images semblent très incohérentes si elles sont carrelées horizontalement et verticalement, comme indiqué ci-dessous :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/58083b0ef203a172.jpg');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>Le l'arrière-plan de la page serait meilleur si l'image était uniquement en mosaïque horizontalement (répéter-x) :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/58083a548d12a750.jpg');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>Exécutez le programme ci-dessus pour essayer ça
Image d'arrière-plan - positionnement défini et non carrelé
Laissez l'image d'arrière-plan n'affecter pas la disposition du texte
Si vous ne voulez pas que les images soient en mosaïque, vous pouvez utiliser l'attribut background-repeat :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/58083c0089e20545.jpg');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>终于为那一身江南烟雨覆了天下，容华谢后，不过一场，山河永寂。</p>
<p>千秋功名，一世葬你，玲珑社稷，可笑却无君王命</p>
</body>
</html>Exécutez le programme et essayez-le
Dans l'exemple ci-dessus, l'image d'arrière-plan et le texte sont affichés à la même position, afin de permettre la mise en page. Pour être plus raisonnable et ne pas affecter la lecture du texte, on peut changer la position de l'image.
Vous pouvez utiliser l'attribut background-position pour changer la position de l'image en arrière-plan :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/58083c0089e20545.jpg');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>背景图片不重复，设置 position 实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>
</html>Exécutez le programme pour l'essayer
Attribut d'abréviation d'arrière-plan
Dans l'exemple ci-dessus, nous pouvons voir que la couleur d'arrière-plan de la page est contrôlée par de nombreux attributs.
Afin de simplifier le code de ces attributs, nous pouvons fusionner ces attributs dans un même attribut.
L'attribut abréviation de couleur de fond est "background":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background:#ffffff url('/upload/course/000/000/006/58083c0089e20545.jpg') no-repeat right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>终于为那一身江南烟雨覆了天下，容华谢后，不过一场，山河永寂。</p>
<p>千秋功名，一世葬你，玲珑社稷，可笑却无君王命</p>
</body>
</body>
</html> Exécutez le programme Essayez
Lorsque vous utilisez l'attribut raccourci, l'ordre des valeurs d'attribut est :
Vous n'avez pas besoin d'utiliser tous les attributs ci-dessus, vous pouvez les utiliser en fonction des besoins réels de la page.
Attribut d'arrière-plan CSS
| Property | 描述 |
|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
section suivante