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
background-repeat
background-attachment
background-position
Couleur d'arrière-plan
L'attribut background-color définit la couleur d'arrière-plan de l'élément.
En CSS, les valeurs de couleur sont généralement définies de la manière suivante :
Hexadécimal - tel que : "#ff0000"
RVB - tel que : "rgb(255,0,0)"
Nom de la couleur - tels que : "red"
Dans l'exemple suivant, les éléments h1, p et div ont des couleurs d'arrière-plan différentes :
<!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>静夜思</h1>
<div>
床前明月光，
<p>疑是地上霜。</p>
举头望明月，
<p>低头思故乡。</p>
</div>
</body>
</html>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ée 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 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片背景测试</title>
<style>
body
{
background-image:url('http://pic.58pic.com/58pic/14/94/21/80U58PICPJM_1024.jpg');
background-color:#cccccc;
}
</style>
</head>
<body>
<h1>明天你好！！</h1>
</body>
</html>Image d'arrière-plan - vignettes horizontales ou verticales
Par défaut, l'attribut background-image mosaïquera la page horizontalement ou verticalement.
Certaines images semblent incohérentes si elles sont carrelées horizontalement et verticalement, comme indiqué ci-dessous :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片背景测试</title>
<style>
body
{
background-image:url('http://img01.taopic.com/141002/240423-14100210124112.jpg');
}
</style>
</head>
<body>
<h1>明天你好！！</h1>
</body>
</html>Si l'image est uniquement carrelée horizontalement (répéter-x), Si l'image est uniquement carrelée horizontalement ( répéter-y).
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 soit carrelée, vous pouvez utiliser l'attribut background-repeat :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片背景测试</title>
<style>
body
{
background-image:url('http://img01.taopic.com/141002/240423-14100210124112.jpg');
background-repeat:no-repeat
}
</style>
</head>
<body>
<div>
<h1>明天你好！！</h1>
</div>
</body>
</html>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 du texte. , nous pouvons changer la position de l'image.
Vous pouvez utiliser l'attribut background-position pour modifier la position de l'image en arrière-plan
background-position:right top;
Background - attribut raccourci
ci-dessus Dans l'exemple, nous pouvons voir que la couleur de fond de la page est contrôlée par de nombreux attributs.
Afin de simplifier le code de ces propriétés, nous pouvons combiner ces propriétés dans une même propriété
La propriété abréviation de background color est "background":
Quand. en utilisant l'abréviation Attributs, l'ordre des valeurs d'attribut est : :
background-color
background-image
background-repeat
background- attachment
background-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.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
