Maison > interface Web > tutoriel CSS > CSS peut-il positionner une image d'arrière-plan à une distance spécifique du bord droit ?

CSS peut-il positionner une image d'arrière-plan à une distance spécifique du bord droit ?

Linda Hamilton
Libérer: 2024-11-30 21:50:11
original
367 Les gens l'ont consulté

Can CSS Position a Background Image a Specific Distance from the Right Edge?

Positionnement précis de l'image d'arrière-plan : alignement sur la marge droite

Le CSS peut-il être utilisé pour positionner une image d'arrière-plan à une distance spécifiée du bord droit d'un élément ? Bien que la propriété background-position conventionnelle permette des ajustements spécifiques depuis la gauche et le haut, il peut sembler qu'il n'existe aucun moyen direct d'obtenir un alignement par rapport à la marge droite.

Cependant, une solution existe :

Solution :

background-position: right 30px center;
Copier après la connexion

Cette technique fonctionne efficacement dans la plupart des navigateurs modernes. Reportez-vous à https://caniuse.com/#feat=css-background-offsets pour connaître la compatibilité du navigateur.

Explication :

Le bon mot-clé demande au navigateur de se positionner l'image sur le bord droit de l'élément. La valeur 30px suivante spécifie la distance à partir de laquelle décaler l'image par rapport à la limite droite. Le mot-clé center garantit le centrage vertical dans la hauteur de l'élément.

Informations supplémentaires :

Pour des informations détaillées, reportez-vous à la spécification W3C sur http://www.w3. org/TR/css3-background/#the-background-position.

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