2013-08-30 27 views
0

我是新來的CSS sprits。我已將小紅色箭頭添加到DIV ID中的所有鏈接中,如圖片。它看起來像這樣。(圖片附後)CSS Sprits,添加填充到背景圖片

如何在背景圖像後得到一些填充?我的意思是圖像和文字之間使用CSS的一些空間。

enter image description here

CSS

#maincontent a:link { 
background: url(images/css-images.png) no-repeat top left; 
background-position: 0 0; 
width: 4px; 
height: 12px; 
display:inline; 
} 

HTML

<div id="maincontent"> 
<a href="results/2013/31r09sup.php">Btech III</a> 
</div> 

我嘗試添加到CSS 填充右,但它給文本之後一些空間不是在形象之後。

回答

0

你想在你的鏈接上使用填充,這將離開它的背景,但移動文本,請嘗試padding-left: 25px;。但添加填充將增加寬度,所以您會希望調整鏈接的寬度並通過添加的填充量減少它(可能不在此示例中)

此外您的示例圖像未加載

試試這個:

#maincontent a:link { 
background: url(images/css-images.png) no-repeat top left; 
background-position: 0 0; 
width: 4px; 
padding-left: 25px; 
height: 12px; 
display:inline; 
} 
+0

非常感謝的作品:d – BlackCoder

+0

沒問題,我也注意到你的寬度只有'4px'如果您的加入文字轉換爲div,ma確保刪除寬度,以便自己調整。 –

+0

simin,stackoverflow要求我等2分鐘選擇一個答案:(平均時間我有另一個問題。http://awesomescreenshot.com/0401nvcn0f看到這個圖像。如何讓圖像顯示到中心..使用同樣的CSS,但刪除了寬度,並將背景更改爲'url(「images/new.gif」)無重複滾動0%0%透明!重要' – BlackCoder

0

只是應用padding-lefttext-indent你的鏈接