CSS：背景圖像和填充

Question

我想在列表項的右側添加背景圖像，並且還想從右側填充一些填充，但我無法做到這一點。請看看下面的例子：

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

我知道我們可以設置通過像素的圖像的位置，但由於各里都有不同的寬度，我不能那樣做。

這裏的jsfiddle鏈接： http://jsfiddle.net/QeGAd/1/

Answer 1

你可以用百分比值：

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

不是像素完美的，但是......

Answer 2

到實際工作中有這樣做的像素完美，唯一的選擇是創建GIF內部有一些透明填充。這樣，你可以將它對齊到LI的右邊，並且仍然有你正在尋找的背景填充。

Answer 3

設置direction CSS屬性爲rtl應該與你一起工作。我想它不支持IE6。

e。摹

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

Answer 4

您可以通過兩種方法實現結果： -

第一種方法定義位置值： -

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

首先演示： -http://jsfiddle.net/QeGAd/18/

第二種方法通過CSS ：前：選擇

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

第二個演示： -http://jsfiddle.net/QeGAd/17/

Answer 5

你可以更精確本：

background-origin: content-box; 

這將使圖像尊重盒子的填充。 http://www.w3schools.com/cssref/css3_pr_background-origin.asp

Answer 6

使用background-position: calc(100% - 20px) center，對於像素完美calc()是最好的解決方案。

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

背景剪輯：內容盒;背景將被繪製在內容框中。