Maison >interface Web >tutoriel HTML >Comment définir différentes propriétés d'arrière-plan dans une seule instruction ?
Comment définir différentes propriétés d'arrière-plan dans une seule instruction ?
- WBOYavant
- 2023-09-15 09:45:021349parcourir
CSS (Cascading Style Sheets) est un outil puissant pour concevoir l'apparence visuelle de votre site Web, y compris les propriétés d'arrière-plan. Grâce à CSS, vous pouvez facilement personnaliser les propriétés d'arrière-plan des pages Web, créer des conceptions uniques et améliorer l'expérience utilisateur. L'utilisation d'une déclaration est un moyen efficace de définir diverses propriétés d'arrière-plan, ce qui permet aux développeurs Web de gagner du temps et de garder le code propre.
Comprendre les propriétés de l'arrière-plan
Avant de définir plusieurs propriétés d'arrière-plan dans une seule déclaration, nous devons comprendre les différentes propriétés d'arrière-plan disponibles en CSS et comprendre le fonctionnement de chaque propriété. Vous trouverez ci-dessous un bref aperçu de chaque propriété.
Background Color - Cet attribut permet de définir la couleur d'arrière-plan de l'élément.
Background-image - Cet attribut permet de définir l'image d'arrière-plan de l'élément. Définissez une image d'arrière-plan à l'aide d'une URL d'image, d'un dégradé linéaire ou d'un dégradé radial.
Background-repeat - Cette propriété permet de définir la façon dont l'image d'arrière-plan se répète. Peut être contrôlé à l'aide de valeurs telles que répéter, répéter-x, répéter-y et non-répétition.
Background-position - Cette propriété permet de définir la position de l'image d'arrière-plan. Les images d'arrière-plan peuvent être positionnées en utilisant des valeurs telles que haut, bas, gauche, droite et centre.
Background-size - Cet attribut permet de définir la taille de l'image d'arrière-plan. La taille de l'image d'arrière-plan peut être définie à l'aide d'une fonction automatique, de superposition, de confinement ou d'une valeur de taille spécifique en pixels, ems ou pourcentage.
Background-attachment - Cette propriété permet de définir si l'image d'arrière-plan doit défiler avec la page ou rester fixe.
Définissez différentes propriétés d'arrière-plan dans une seule instruction
L'attribut abrégé 'background' est utilisé pour définir plusieurs attributs d'arrière-plan, ce qui permet de définir la couleur d'arrière-plan, l'image, la répétition, la position et la pièce jointe dans une seule déclaration.
Grammaire
selector {
background: [background-color] [background-image] [background-repeat] [background-position] [background-size] [background-attachment];
}
L'ordre des attributs n'a pas d'importance ici, chaque attribut est séparé par un espace. En fonction des exigences de conception, une autre propriété peut être incluse dans la propriété abrégée « arrière-plan ».
Exemple de la façon de définir plusieurs propriétés d'arrière-plan dans une seule déclaration.
Nous allons maintenant examiner quelques exemples de définition de plusieurs propriétés d'arrière-plan dans une seule déclaration.
Exemple 1 : Définir l'image d'arrière-plan
Ici, nous allons définir l'image d'arrière-plan dans l'élément body en utilisant l'attribut raccourci "background".
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("https://www.tutorialspoint.com/dip/images/black_and_white.jpg") no-repeat center center fixed;
}
h3 {
text-align: center;
}
</style>
</head>
<body>
<h3>Setting a background image in the body element</h3>
</body>
</html>
Dans l'exemple ci-dessus, nous définissons l'image d'arrière-plan et la couleur d'arrière-plan de l'élément body. Nous avons également défini la position de l'arrière-plan au centre et corrigé l'image d'arrière-plan afin qu'elle ne bouge pas lors du défilement. L'attribut "no-repeat" garantit que l'image d'arrière-plan n'est pas répétée.
Exemple 2 : Définir un arrière-plan dégradé
Ici, nous utiliserons l'attribut raccourci background pour définir un arrière-plan dégradé dans l'élément body.
<!DOCTYPE html>
<html>
<head>
<title>Setting the Gradient Background</title>
<style>
body {
background: linear-gradient(to top, #00cfff, #1e40ff);
}
h1,h3 {
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<h3>Setting the Gradient Background in the body element</h3>
</body>
</html>
Dans l'exemple ci-dessus, nous avons utilisé la fonction "linear-gradient" pour définir un arrière-plan dégradé. Le paramètre "to top" précise que le dégradé doit aller de bas en haut.
Exemple 3 - Définition d'une image d'arrière-plan dans un élément div
Ici, nous allons définir l'image d'arrière-plan dans l'élément div en utilisant l'attribut raccourci "background".
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
div {
background: lightblue url("https://www.tutorialspoint.com/dip/images/einstein.jpg") no-repeat center fixed;
height:300px;
width:250px;
margin:auto;
}
</style>
</head>
<body>
<h2>Setting the Background image for the div element</h2>
<div></div>
</body>
</html>
Dans l'exemple ci-dessus, nous définissons l'image d'arrière-plan et la couleur d'arrière-plan de l'élément body. Nous avons également défini la position de l'arrière-plan au centre et corrigé l'image d'arrière-plan afin qu'elle ne bouge pas lors du défilement.
Conclusion
Dans l'article ci-dessus, nous avons discuté de la définition des propriétés d'arrière-plan dans une seule déclaration. L'attribut background est une partie importante du style d'une page Web. Nous utilisons des propriétés abrégées pour définir plusieurs propriétés d'arrière-plan dans une seule déclaration. L'attribut raccourci d'arrière-plan est utile pour gagner du temps et améliorer la lisibilité du code.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!