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中文网(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 :

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	设置背景图像是否及如何重复。

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> body { background-image:url('https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg'); background-color:#cccccc; } </style> </head> <body> <h1>Hello World!</h1> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Arrière-plan CSS

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]