html - 如何将背景位置分配为“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”类。

我希望这有帮助。