web-dev-qa-db-fra.com

CSS: image de fond et remplissage

Je souhaite ajouter une image d'arrière-plan sur le côté droit des éléments de la liste et je souhaite également obtenir un remplissage du côté droit, mais je suis incapable de le faire. Veuillez regarder l'exemple suivant:

HTML:

<ul>
    <li>Hello</li>
    <li>Hello world</li>
</ul>

CSS:

ul{
    width:100px;  
}

ul li{
    border:1px solid orange;
    background: url("arrow1.gif") no-repeat center right;
}

ul li:hover{
     background:yellow url("arrow1.gif") no-repeat center right;
}

Je sais que nous pouvons définir la position de l'image en pixels, mais comme chaque li a une largeur différente, je ne peux pas le faire.

Voici le lien JSFiddle: http://jsfiddle.net/QeGAd/1/

htmlcsspadding
51
user966582

Vous pouvez utiliser des valeurs en pourcentage:

background: yellow url("arrow1.gif") no-repeat 95% 50%;

Pas pixel parfait, mais…

37
Juan G. Hurtado

Vous pouvez être plus précis avec ceci:

background-Origin: content-box;

Cela fera que l'image respecte le remplissage de la boîte. http://www.w3schools.com/cssref/css3_pr_background-Origin.asp

125
Mladen Janjetovic

Vous pouvez obtenir vos résultats avec deux méthodes: -

Première méthode définir les valeurs de position : -

[~ # ~] html [~ # ~] 

 <ul>
 <li>Hello</li>
 <li>Hello world</li>
 </ul>

[~ # ~] css [~ # ~] 

    ul{
    width:100px;    
}

ul li{
    border:1px solid orange;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat 90% 5px;
}


ul li:hover{
    background: yellow url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat 90% 5px;
}

Première démo: - http://jsfiddle.net/QeGAd/18/

Deuxième méthode par CSS : avant: après sélecteurs

[~ # ~] html [~ # ~] 

<ul>
<li>Hello</li>
<li>Hello world</li>

[~ # ~] css [~ # ~] 

    ul{
    width:100px;    
}

ul li{
    border:1px solid orange;
}

ul li:after {
    content: " ";
    padding-right: 16px;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat center right;
}

ul li:hover {
    background:yellow;
}

ul li:hover:after {
    content: " ";
    padding-right: 16px;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat center right;
}

Deuxième démo: - http://jsfiddle.net/QeGAd/17/

4
Shailender Arora

Utilisez background-position: calc(100% - 20px) center, pour la perfection en pixels calc() est la meilleure solution.

ul {
  width: 100px;
}
ul li {
  border: 1px solid orange;
  background: url("http://placehold.it/30x15") no-repeat calc(100% - 10px) center;
}
ul li:hover {
  background-position: calc(100% - 20px) center;
}
<ul>
  <li>Hello</li>
  <li>Hello world</li>
</ul>
3
Mo.
background-clip: content-box;

L'arrière-plan sera peint dans la zone de contenu.

3
Ed Kolosovsky

La seule option possible pour rendre ce pixel parfait est de créer un remplissage transparent dans le GIF lui-même. De cette façon, vous pouvez l'aligner à la droite du LI et conserver le remplissage d'arrière-plan que vous recherchez.

2
Dennis Jamin

Vous pouvez simplement ajouter le remplissage à l'élément de bloc de tour et ajouter background-Origin style comme ça:

.block {
  position: relative;
  display: inline-block;
  padding: 10px 12px;
  border:1px solid #e5e5e5;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-Origin: content-box;
  background-image: url(_your_image_);
  height: 14rem;
  width: 10rem;
}

Vous pouvez vérifier plusieurs https://www.w3schools.com/cssref/css3_pr_background-Origin.asp

0
Volodymyr Khmil

la définition de direction , propriété CSS à rtl devrait fonctionner avec vous. Je suppose que ce n'est pas pris en charge sur IE6.

par exemple

<ul style="direction:rtl;">
<li> item </li>
<li> item </li>
</ul>
0
hjindal