Arrière-plans CSS


CSS Background

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

arrière-plan L'attribut color

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ée dans le sélecteur de corps :

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>你好世界！这是来自 W3CSchoolphp中文网的实例。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

En CSS, les valeurs de couleur ​​sont généralement définis de la manière suivante :

  • Hex - Par exemple : "#ff0000"

  • RGB - Par exemple : "rgb (255,0,0)"

  • Nom de la couleur - tel que : "rouge"

Dans l'exemple suivant, h1, p, et les éléments div ont des couleurs d'arrière-plan différentes :

Instance

<!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>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Image d'arrière-plan

L'attribut background-image décrit l'image d'arrière-plan de l'élément.

Par défaut, l'image d'arrière-plan est en mosaïque et répété 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('https://img.php.cn/upload/article/000/000/015/5c67d689a8a95760.gif');
	background-color:#cccccc;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

Exécuter instance»

Cliquez sur le bouton « Exécuter l'instance » Voir des exemples en ligne

Vous trouverez ci-dessous un exemple d'une mauvaise combinaison de texte et d'image d'arrière-plan. Mauvaise lisibilité du texte :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
	body {background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7253c8e5996.jpg');}
</style>
</head>

<body>
<h1>Hello World!</h1>
<p>该文本不容易被阅读。</p>
</body>

</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne instance

Image d'arrière-plan - Mosaïque horizontale ou verticale

Par défaut, la propriété 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('https://img.php.cn/upload/article/000/000/015/5c67d765c3e7c347.png');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>

</html>

运行结果：
php工具

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Si l'image est uniquement carrelée horizontalement (répéter-x), l'arrière-plan de la page sera soyez meilleur :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
	background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d765c3e7c347.png');
	background-repeat:repeat-x;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Image d'arrière-plan - définir le positionnement ou non carrelée

Laissez l'image d'arrière-plan n'affecter pas la disposition du texte

Si vous ne souhaitez pas que l'image être carrelé, vous pouvez utiliser l'attribut background-repee :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
	background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7b29e0e8411.png');
	background-repeat:no-repeat;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>

</html>

Exécuter l'instance»

Cliquez sur "Exécuter Bouton "Instance" pour visualiser l'instance en ligne

Dans l'exemple ci-dessus, l'image d'arrière-plan et le texte sont affichés à la même position. Afin de rendre la mise en page plus raisonnable et de ne pas affecter la lecture de l'instance texte, nous pouvons changer la position de l'image.

Vous pouvez utiliser l'attribut background-position pour changer la position de l'image en arrière-plan :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
	background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7b29e0e8411.png');
	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écuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Arrière-plan - attribut abrégé

Dans l'exemple ci-dessus, nous peut voir que la couleur d'arrière-plan de la page est transmise. Beaucoup de propriétés à contrôler.

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":

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
	background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7b29e0e8411.png');
	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écuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Quand en utilisant l'attribut abrégé, L'ordre des valeurs d'attribut est : :

  • background-color

  • background-image

  • arrière-plan -répéter

  • arrière-plan-attachement

  • arrière-plan-position

Vous n'avez pas besoin d'utiliser tous les attributs ci-dessus. Vous pouvez l'utiliser en fonction des besoins réels de la page

Cet exemple utilise le CSS introduit précédemment. Vous pouvez voir l'exemple correspondant : Exemple CSS.

Plus d'exemples

Comment définir une image d'arrière-plan fixe

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>PHP中文网(php.cn)</title>
<style>
body 
{
background-image:url('https://img.php.cn/upload/image/904/696/399/1546677458497154.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>

<body>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
</body>

</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » Voir des exemples en ligne

Cet exemple montre comment définir une image d'arrière-plan fixe. L'image ne défile pas avec le reste de la page.

Propriété d'arrière-plan CSS

Property描述
background简写属性，作用是将背景属性设置在一个声明中。
background-attachment背景图像是否固定或者随着页面的其余部分滚动。
background-color设置元素的背景颜色。
background-image把图像设置为背景。
background-position设置背景图像的起始位置。
background-repeat设置背景图像是否及如何重复。