如何從右側開始將背景位置設置爲絕對距離？

我想爲div設置一個背景圖像，方式是它位於div的右上角，但距離頂部和右側的距離固定爲10px。如何從右側開始將背景位置設置爲絕對距離？

這裏是我會怎麼做，如果在div的左上角希望它：

background: url(images/img06.gif) no-repeat 10px 10px;

反正有沒有達到同樣的效果，但顯示在右上角的背景是什麼？

2008-09-22 bahadorn

使用前面提到的規則與頂部和右邊緣沿：

background: url(images/img06.gif) no-repeat top right; 
margin-top: 10px; 
margin-right: 10px;

背景圖像只出現填充內，而不是利潤。如果添加保證金不是一個選項，您可能不得不求助於另一個div，儘管我建議您只使用該保證金作爲最後的手段，儘量保持您的標記儘可能精簡和分段。

2008-09-22 12:47:19 roryf

這是一個很好的解決方案，但由於我想顯示邊界，這將需要包裝另一個非語義的div 。我結束了使用標記而不是一個CSS背景，並最終對我很好。 – doub1ejack 2012-01-25 18:07:40

在我的情況下，我發現`padding-top`和`padding-right`是在跨度後定位小圖標的解決方案。 – 2012-03-19 21:11:21

我不知道它在純CSS是可能的，所以你可以嘗試

background: url(images/img06.gif) no-repeat top right;

和修改您的圖像納入頂部和右側的透明色10px的邊框

2008-09-22 12:22:38 mathieu

我正在尋找一個純粹的CSS方式，但如果這是唯一的方法... – bahadorn 2008-09-23 06:31:56

有幾種方法可以做到這一點。

2008-09-22 12:23:39

透明邊框不是那種黑客！沒有額外的標記，沒有邊界問題等 – Agos 2012-03-20 10:58:58

繞過其他黑客的黑客仍然是黑客;） – ajbeaven 2012-11-14 02:21:32

一個解決方案是絕對定位一個空的div，並給出背景。我不認爲有一種方法可以純粹用CSS來完成，不會改變圖像，也不會在流體佈局中出現額外的標記。

2008-09-22 12:23:41 ceejayoz

您可以使用百分比：

background: url(...) top 98% no-repeat;

如果你知道它應該是很容易確定需要使用多大比例父div的寬度。

2008-09-22 12:49:10 Rahul

-2

正確的格式是：

background: url(YourUrl) 0px -50px no-repeat;

0px哪裏是水平位置和-50px是垂直位置。

CSS background-position接受負值。

2012-02-03 18:21:48

在Firefox，IE9和Opera 10中。5，你可以使用一個四值的語法，specified in CSS3：

background-position: right 10px top 10px;

來源：MDN

2012-03-30 12:34:30 Boldewyn

您可以假冒右手側的像素（邊框白色的大部分時間或者也可以是空間其他）

background-image: url(../images/calender.svg) center right 
    border-right: 5px white solid

2015-10-04 01:22:12

回答