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
429 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!

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