Maison >interface Web >tutoriel CSS >Comment placer une image d'arrière-plan en utilisant ::before pseudo-sélecteur en CSS ?

Comment placer une image d'arrière-plan en utilisant ::before pseudo-sélecteur en CSS ?

王林avant: 2023-08-19 20:21:182801parcourir

Comment placer une image darrière-plan en utilisant ::before pseudo-sélecteur en CSS ?

CSS contient plusieurs pseudo-sélecteurs, dont '::before' en fait partie. Chaque pseudo-sélecteur de CSS nous permet de styliser les éléments HTML en utilisant différents styles.

De plus, le pseudo-sélecteur '::before' nous permet de configurer l'image d'arrière-plan pour le code HTML particulier, que nous allons apprendre dans ce tutoriel.

Avant de commencer le tutoriel, clarifions que ':before' et '::before' sont égaux. CSS2 utilise ':before', tandis que CSS3 utilise '::before'.

Grammaire

Les utilisateurs peuvent utiliser le pseudo-sélecteur '::before' pour définir l'image d'arrière-plan d'un élément HTML spécifique selon la syntaxe suivante.

.div::before {
   content: "";
   background-image: url("URL");
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
}

Dans la syntaxe ci-dessus, nous avons utilisé le sélecteur '::before' avec le sélecteur css. En effet, il ajoute du contenu avant l'élément. Ici, nous avons utilisé du contenu vide car nous n'avons pas besoin de définir de contenu HTML. Nous utilisons la propriété background-image pour définir l'image d'arrière-plan et la propriété position pour définir la position de l'image d'arrière-plan.

Exemple 1 (Définir l'image d'arrière-plan à l'aide du pseudo-sélecteur '::before')

Dans l'exemple ci-dessous, nous avons créé un élément div contenant la classe "background". En CSS, nous utilisons des noms de classe pour accéder aux éléments div et appliquer des styles CSS. De plus, nous avons utilisé le nom de classe de l'élément div et le pseudo-sélecteur "::before" pour ajouter l'image d'arrière-plan.

Nous définissons les positions haut, bas, gauche et droite dans le sélecteur. De plus, nous avons ajouté quelques propriétés liées à l'image d'arrière-plan pour la manipuler. Dans la sortie, l'utilisateur peut observer l'image d'arrière-plan sur l'ensemble de la page Web.

<html>
<head>
   <style>
      .background {
         padding: 15px;
         margin-bottom: 15px;
         width: 500px;
         height: 500px;
         font-size: 20px;
         text-align: center;
      }
      .background::before {
         content: "";
         background-image: url("https://www.tutorialspoint.com/static/images/simply-easy-learning.png");
         position: absolute;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         background-repeat: no-repeat;
         background-position: center;
         background-size: 100%;
         z-index: -1;
      }
   </style>
</head>
<body>
   <h2> Using the <i> ::before psuedo selector </i> to place background image using CSS </h2>
   <div class = "background"> Welcome to the TutorialsPoint! </div>
</html>

Exemple 2 (Définir l'image d'arrière-plan pour un élément div spécifique)

Dans l'exemple ci-dessous, nous avons démontré l'utilisation du pseudo-sélecteur '::before' pour définir l'image d'arrière-plan pour l'élément div particulier

Ici, nous définissons les dimensions de l'image dans le pseudo-sélecteur pour définir l'image d'arrière-plan uniquement pour un élément div particulier. Nous avons également utilisé la propriété « background-size : cover ».

Dans la sortie, nous pouvons voir l'élément div contenant l'image d'arrière-plan plutôt que l'ensemble de l'élément div.

<html>
<head>
   <style>
      .background {
         padding: 15px;
         margin-bottom: 15px;
         color: red;
         width: 500px;
         height: 500px;
         font-size: 20px;
         text-align: center;
         font-size: 3rem;
      }
      .background::before {
         content: "";
         background-image: url("https://www.tutorialspoint.com/static/images/simply-easy-learning.png");
         position: absolute;
         background-repeat: no-repeat;
         background-position: center;
         width: 500px;
         height: 500px;
         background-size: cover;
         z-index: -1;
      }
   </style>
</head>
<body>
   <h2> Using the <i> ::before psuedo selector </i> to place background image using CSS </h2>
   <div class = "background"> We set the linear gradient on the background image. </div>
</html>

Exemple 3 (configuration du dégradé linéaire comme arrière-plan à l'aide du sélecteur '::before')

Dans l'exemple ci-dessous, nous utilisons le pseudo-sélecteur '::before' pour définir un dégradé linéaire sur l'arrière-plan d'un élément HTML spécifique. Ici, nous utilisons la fonction Linear-gradient() comme valeur de l'attribut 'background' pour définir le dégradé sur l'arrière-plan au lieu de l'image.

Dans la sortie, nous pouvons voir le dégradé comme arrière-plan de l'élément div.

<html>
<head>
   <style>
      .background {
         width: 600px;
         height: 300px;
         position: relative;
         text-align: center;
         color: green;
         font-size: 30px;
         font-weight: bold;
         font-family: Arial, Helvetica, sans-serif;
         padding: 20px;
      }
      .background::before {
         content: "";
         background: linear-gradient(to right, red 0%, orange 50%, yellow 100%);
         background-size: cover;
         background-position: center;
         position: absolute;
         top: 0; left: 0; right: 0;  bottom: 0; opacity: .5;z-index: -1;
      }
   </style>
</head>
<body>
   <h2> Using the <i> ::before psuedo selector </i> to place background image using CSS </h2>
   <div class = "background"> We have set the linear gradient for this div element using the '::before' pseudo selector. </div>
</html>

Nous avons appris à définir l'image d'arrière-plan à l'aide du pseudo-sélecteur '::before'. Lorsque nous utilisons un pseudo-sélecteur pour ajouter du contenu à la page Web, il ajoute du contenu indépendamment en supprimant le contenu du flux actuel de la page Web.

Ainsi, nous pouvons utiliser des pseudo-sélecteurs pour ajouter du contenu à la page Web sans affecter le contenu actuel. De plus, il peut ajouter du contenu au-dessus de la page Web. Ici, il pourrait également ajouter une image d'arrière-plan au-dessus d'un autre contenu, mais nous avons utilisé l'attribut "z-index" pour définir l'image comme arrière-plan de l'élément div.

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!

css css3 html for using Property this 选择器 position background

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment rendre la hauteur d'une balise div égale à la hauteur de la fenêtre du navigateur en utilisant CSS ?Article suivant：Comment rendre la hauteur d'une balise div égale à la hauteur de la fenêtre du navigateur en utilisant CSS ?

Articles Liés

Voir plus