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'.
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.
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>
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>
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>
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!