Maison > interface Web > tutoriel CSS > Comment positionner une image d'arrière-plan à partir de la droite à l'aide de CSS ?

Comment positionner une image d'arrière-plan à partir de la droite à l'aide de CSS ?

Barbara Streisand
Libérer: 2024-11-28 05:41:12
original
962 Les gens l'ont consulté

How Do I Position a Background Image from the Right Using CSS?

Positionnement d'une image d'arrière-plan par la droite à l'aide de CSS

Dans le domaine de la conception Web, il est souvent nécessaire de positionner les images d'arrière-plan avec précision dans les éléments. Bien qu'il soit simple de décaler les images depuis la gauche, comment pouvez-vous obtenir la même chose depuis la droite ?

La solution réside dans l'exploitation de la propriété background-position avec des valeurs de mots clés.

#myElement {
    background-position: right 10px top;
}
Copier après la connexion

Ceci Le code positionne l'image d'arrière-plan à 10 pixels du bord droit de l'élément, ainsi qu'en haut de l'élément.

Au départ, cette technique n'était pas largement supportée mais a depuis gagné compatibilité avec les navigateurs modernes. Les navigateurs comme Chrome et Firefox restituent le positionnement de l'arrière-plan avec précision. Pour un aperçu complet de la prise en charge du navigateur, reportez-vous à Can I Use (https://caniuse.com/).

Découvert à l'origine sur le blog Tanalin (http://tanalin.com/en/blog/2011 /09/css3-background-position/), cette fonctionnalité CSS3 est devenue indispensable pour un positionnement précis de l'image de fond.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal