CSS: immagine di sfondo e riempimento

Question

Desidero aggiungere un'immagine di sfondo sul lato destro degli elementi dell'elenco e voglio avere anche un riempimento dal lato destro, ma non riesco a farlo. Si prega di dare un'occhiata al seguente esempio:

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

So che possiamo impostare la posizione dell'immagine pixel, ma dal momento che ciascuno dei Li è diversa larghezza , Non posso farlo.

Ecco JSFiddle link: http://jsfiddle.net/QeGAd/1/

Answer 1

È possibile utilizzare valori percentuali:

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

Non Pixel perfetto, ma ...

Answer 2

L'unica opzione per actuall avere questo pixel reso perfetto è quello di creare un riempimento trasparente all'interno della stessa GIF. In questo modo puoi effettivamente allinearlo a destra della LI e avere ancora il padding di sfondo che stai cercando.

Answer 3

impostazione direction La proprietà CSS di rtl dovrebbe funzionare con voi. Immagino che non sia supportato su IE6.

e.g

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

Answer 4

È possibile ottenere i risultati con due metodi: -

Primo metodo definiscono valori di posizione: -

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

Prima Demo: -http://jsfiddle.net/QeGAd/18/

Secondo metodo da CSS : Prima: Dopo selettori

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

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

Answer 5

È possibile essere più precisi con questo:

background-origin: content-box; 

Ciò renderà l'immagine rispettosa il padding della scatola. http://www.w3schools.com/cssref/css3_pr_background-origin.asp

Answer 6

Utilizzare background-position: calc(100% - 20px) center, Per la perfezione dei pixel calc() è la soluzione migliore.

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

background-clip: contenuti-box; Lo sfondo verrà dipinto all'interno della casella del contenuto.