Arrière-plan CSS
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?:
background-color
background-image
répétition d'arrière-plan
pièce jointe d'arrière-plan
position 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中文網(wǎng)(php.cn)</title>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>我的 CSS web 頁!</h1>
<p>你好！這是來自php中文網(wǎng)的實例。</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中文網(wǎng)(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>
我們?nèi)匀辉谕粋€ 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中文網(wǎng)(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中文網(wǎng)(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中文網(wǎng)(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中文網(wǎng)(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中文網(wǎng)(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中文網(wǎng)(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?:
background-color
-
arrière-plan-image
arrière-plan-répétition
arrière-plan-pièce jointe
arrière-plan- position
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 | 設置背景圖像是否及如何重復。 |
