Comment définir différentes propriétés d'arrière-plan dans une seule instruction ?-tutoriel HTML-php.cn

Comment définir différentes propriétés d'arrière-plan dans une seule instruction ?

WBOY

Libérer： 2023-09-15 09:45:02

avant

1355 Les gens l'ont consulté

Comment définir différentes propriétés darrière-plan dans une seule instruction ?

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];
}

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!