如何将背景位置指定为“ margin-right：10px”？

Question

我正在尝试将图像作为背景，并希望它向右对齐，但不紧密对齐。 像margin-right：10px。 是否可以在纯CSS中执行此操作，而无需在图像中显式添加边距？

我做了几次尝试，但都失败了... http://jsfiddle.net/cA7Un/1/

提前致谢！

Answer 1

您可以使用百分比，但这只有在您知道容器的宽度保持不变的情况下才有用：

background-position: 95% center;

否则，您可以在诸如Photoshop之类的图像编辑器中，在图像的右侧添加10像素的空白。

Answer 2

要使用放在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”类。

我希望这有帮助。