web-dev-qa-db-fra.com

Positionnement de l'image de fond, ajout de rembourrage

Je voudrais ajouter un arrière-plan à une div, position droite centre, mais !, ont un peu de remplissage à l'image. La div ayant un remplissage pour le texte, je veux donc mettre un peu en arrière-plan. est probablement plus logique avec exemple:

http://jsbin.com/umuvud/edit#javascript,html,live

Merci!

cssbackground-image
56
Ian Davis

Réponse mise à jour:

On a fait remarquer à plusieurs reprises que ce n’était pas la bonne réponse à cette question, et je suis d’accord. À l'époque où cette réponse a été écrite, IE 9 était encore nouveau (environ 8 mois) et beaucoup de développeurs, y compris moi-même, avaient besoin d'une solution pour <= IE 9. IE 9 est quand IE a commencé à prendre en charge background-Origin . Cependant, cela fait plus de six ans et demi, alors voici la solution mise à jour que je recommande fortement d'utiliser une frontière réelle. Dans le cas où <IE 9 support est nécessaire. Ma réponse originale se trouve sous l'extrait de démonstration. Elle utilise une bordure opaque pour simuler le remplissage des images d'arrière-plan.

#hello {
  padding-right: 10px;
  background-color:green;
  background: url("https://placehold.it/15/5C5/FFF") no-repeat scroll right center #e8e8e8;
  background-Origin: content-box;
}
<p id="hello">I want the background icon to have padding to it too!I want the background icon twant the background icon to have padding to it too!I want the background icon to have padding to it too!I want the background icon to have padding to it too!</p>

Réponse originale:

vous pouvez le simuler avec une bordure de 10 pixels de la même couleur que l'arrière-plan:

http://jsbin.com/eparad/edit#javascript,html,live

#hello {
   border: 10px solid #e8e8e8;
   background-color: green;
   background: url("http://www.costascuisine.com/images/buttons/collapseIcon.gif")
               no-repeat scroll right center #e8e8e8;
}
84
Joseph Marikle

c'est en fait assez facile à faire. Vous y êtes presque, en faisant ce que vous avez fait avec background-position: right center;. Ce dont nous avons réellement besoin dans ce cas-ci ressemble beaucoup à cela. Convertissons-les en pourcentages. Nous savons que center = 50%, C'est donc assez simple. Maintenant, pour obtenir le rembourrage que vous vouliez, vous devez positionner l’arrière-plan de la manière suivante: background-position: 99% 50%.

Le deuxième moyen, plus efficace, consiste à utiliser la même idée background-position Et à utiliser simplement background-position: 400px (width of parent) 50%;. Bien sûr, cette méthode nécessite une largeur statique, mais vous donnera la même chose à chaque fois.

Méthode 1 (99% 50%)
Méthode 2 (400px 50%)

52
John Fish

Il existe en fait une solution native à cela, en utilisant le quatre valeurs à background-position

.CssClass {background-position: right 10px top 20px;}

Cela signifie 10px de droite et 20px de haut. vous pouvez également utiliser trois valeurs la quatrième valeur comptera pour 0.

10
Hejar

vous pouvez utiliser background-Origin: padding-box; Ajoutez ensuite un peu de marge à l'endroit souhaité, par exemple: #logo {background-image: url(your/image.jpg); background-Origin:padding-box; padding-left: 15%;}. Ainsi, vous attachez l'image à la zone de remplissage qui la contient afin de pouvoir la positionner où vous voulez.

7
Adrn

Si quelqu'un d'autre a besoin d'ajouter du rembourrage à quelque chose avec background-image et background-size: contenir ou couverture, j'ai utilisé ce qui suit: une belle façon de le faire. Vous pouvez remplacer la largeur de la bordure par 10% ou 2vw ou ce que vous préférez.

.bg-image {
    background: url("/image/logo.png") no-repeat center #ffffff / contain;
    border: inset 10px transparent;
    box-sizing: border-box;
}

Cela signifie que vous n'avez pas à définir de largeur.

2
JHair

tout d’abord, pour être un peu pervers, il vaut mieux ne pas utiliser seulement le <background> tag. utilisez plutôt le bon, plus spécifique, <background-image> tag.

la seule façon dont je suis conscient de faire une telle chose est de construire le padding dans l'image en étendant le cache. puisque les pixels vides ne sont pas supprimés, vous avez votre remplissage ici. Donc, si vous avez besoin d'une bordure de 10 pixels, créez 10 pixels de pixels vides tout autour de votre image. c’est très simple dans Photoshop, Fireworks, GIMP, etc.

je recommanderais également d'essayer le format PNG8 au lieu du GIF mourant ... beaucoup mieux.

il existe peut-être une solution alternative à votre problème si nous en savions un peu plus sur la façon dont vous l'utilisez. :) on dirait que vous essayez d'ajouter un bouton d'accordéon. cela serait mieux placé dans le HTML car vous pourrez alors le cibler avec JavaScript/PHP; quelque chose que vous ne pouvez pas faire si c'est à l'arrière-plan (du moins pas simplement). Dans un tel cas, vous pouvez styler l'image de votre image CSS actuelle en utilisant les éléments suivants:

#hello img { padding: 10px; }

WR!

0
WhiteRau

Pour ajouter de l'espace avant l'image d'arrière-plan, vous pouvez définir la "largeur" ​​de l'élément qui utilise l'objet "image d'arrière-plan". Et ensuite, définir une valeur de pixel dans la propriété 'background-position' pour créer un espace à partir de la gauche.

Par exemple, dans un scénario où je disposais d'un menu de navigation comportant une puce avant l'élément de lien et le graphique de la puce pouvant être modifié si le lien corrosif devenait actif. En outre, le lien actif avait également une couleur de fond à afficher, et cette couleur de fond avait un remplissage approximatif de 15 px à la fois du côté gauche et du côté droit de l'élément de lien (donc sur la gauche, il comprend également une icône en forme de balle du lien).

Bien que padding-right remplisse son objectif, la couleur de fond est étirée jusqu’à 15 pixels de plus à droite du texte du lien. Le padding-left n'a été ajouté qu'à l'espace entre le texte du lien et la puce.

J'ai donc pris la largeur de l'objet background-color de la conception PSD (par exemple, 82px) et ajouté celle-ci à l'élément li (dans une classe créée pour afficher l'état actif), puis j'ai défini la valeur background-position sur 20px. Cela a eu pour conséquence que l'icône de balle a été déplacée à l'intérieur du bord gauche. Et sa m'a fourni la sortie désirée d'avoir laissé le remplissage avant l'icône de balle utilisée comme image d'arrière-plan.

Veuillez noter que vous devrez peut-être ajuster vos valeurs de remplissage/marge en conséquence, ce qui peut être utilisé soit pour l'espace entre les éléments de lien, soit pour l'espacement entre l'icône représentant une puce et le texte du lien.

0
Ravi Khandelwal