CSS: Imagen de fondo y relleno

Question

Quiero agregar una imagen de fondo en el lado derecho de los elementos de la lista, y quiero tener un relleno del lado derecho también, pero no puedo hacer eso. Por favor, eche un vistazo a siguiente ejemplo:

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; 
} 

sé que podemos ajustar la posición de la imagen por píxeles, pero dado que cada uno de los li tiene una anchura diferente No puedo hacer eso

Aquí hay enlace jsFiddle: http://jsfiddle.net/QeGAd/1/

Answer 1

Puede utilizar los valores de porcentaje:

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

No píxel perfecto, pero ...

Answer 2

La única opción de Actuall tiene este píxel hecho perfecto es crear algo de relleno transparente dentro del GIF mismo. De esa forma, puede alinearlo a la derecha de LI y aún así tener el relleno de fondo que está buscando.

Answer 3

configuración direction propiedad de CSS a rtl debería funcionar con usted. Supongo que no es compatible con IE6.

e.g

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

Answer 4

Usted puede alcanzar sus resultados con dos métodos: -

Primer método definen valores de posición: -

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; 
} 

primer demo: -http://jsfiddle.net/QeGAd/18/

Segundo método por CSS : Antes: Después selectores

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; 
} 

segundo demo: -http://jsfiddle.net/QeGAd/17/

Answer 5

Puede ser más precisos con esto:

background-origin: content-box; 

Esto hará que la imagen respete el relleno de la caja. http://www.w3schools.com/cssref/css3_pr_background-origin.asp

Answer 6

Use background-position: calc(100% - 20px) center, Para la perfección de píxeles calc() es la mejor solución.

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>

Answer 7

fondo-clip: Contenido de la caja; El fondo se pintará dentro del cuadro de contenido.