如何将背景位置指定为'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”类。

我希望这会有所帮助。