如何將背景位置分配爲「margin-right：10px」之類的內容？

我想把圖像作爲背景，並希望它對齊到右側，但不是嚴格對齊。像margin-right：10px。是否有可能在純CSS中做到這一點，沒有明確地爲圖像添加邊距？如何將背景位置分配爲「margin-right：10px」之類的內容？

我曾多次嘗試，但都失敗了...... http://jsfiddle.net/cA7Un/1/

提前感謝！

2011-10-22 Liangliang Zheng

顯然有一個提案擴展到'背景位置'在[CSS3的背景模塊]（http://www.w3.org/TR/css3-background/#the-background-position）解決這個問題，除了 - 等待它 - 沒有人實現它。 – BoltClock

哦..好難過。但謝謝 –

要使用你穿上的jsfiddle的例子：

我聲明瞭以下額外的樣式：

.rss 
    { 
     background-image: url('http://tipabsorb.com/index/wp-content/plugins/category-specific-rss-feed-menu/rss_small_icon.png'); 
     background-repeat: no-repeat; 
     float: right; 
     width: 16px; 
     min-width: 16px; 
     max-width: 16px; 
     height: 16px; 
     min-height: 16px; 
     max-height: 16px; 
     margin: 10px; 
    }

中採用相同的圖像，但增加了一個額外的div你對你的標記。這種方法爲您提供圖像作爲背景圖像，然後使用邊距，您可以將它定位在遠離您想要的任何一邊（如果您希望在左側進行更改，也可以更改該浮點數）。

<div class='test' style='width: 300px; height: 100%'> 
    <div class="rss"> 
    </div> 
    <p> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
     euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
</div>

「正常」標記之前「rss」div的位置很重要，因爲這會影響流程。也可以通過將div與相對父親完全定位來實現。

最後我從「.test」類中刪除了背景，因爲它現在已經移到「rss」類中。

我希望這會有所幫助。

來源

2011-10-22 09:41:48

謝謝。我想我會和這一起去的 –

你可以使用一個比例，但如果你知道容器的寬度將保持不變，這是唯一的好：

background-position: 95% center;

否則，您可以添加空白的10個像素圖像的右側在像Photoshop一樣的圖像編輯器中。

enter image description here

來源

2011-10-22 05:47:01

謝謝你，這相當接近...但結果是不是我期望..圖像不整齊元素 –

background-position：url（.. image ...）不重複100％中心;我認爲這是比較好的方法，就像你說的那樣，在PNG圖像的右側留下10px，並且會巧妙地做到這一點。 – ncubica

如何將背景位置分配爲「margin-right：10px」之類的內容？

回答

相關問題