填充背景图像右侧对齐

Question

我有这个HTML：

<div class="warning">
    <span>text text text</span>
</div>

和这个css：

.warning
{
    background:#F2EEBB url(Images/warning_triangle.gif) no-repeat right center; 
    border:solid 1px red;
    margin:5px;
    color:#000000;
    font-weight:bold;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:3px;
    padding-right:18px;
}

这是结果：

问题是与右边对齐的背景图像在它和边框之间没有填充。如何在图像和边框之间添加填充？ （我无法在div中添加元素！）

Answer 1

在html中没有任何变化，只有css的一点变化就可以实现。尝试这个css - 我只是改变警告图标的位置。

background:#F2EEBB url(Images/warning_triangle.gif) no-repeat 99.5% center;

<div class="warning">
    <span>text text text</span>
</div>


.warning
{
    background:#F2EEBB url(Images/warning_triangle.gif) no-repeat 99.5% center; 
    border:solid 1px red;
    margin:5px;
    color:#000000;
    font-weight:bold;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:3px;
    padding-right:18px;
}

Answer 2

您可以使用“：after”-psuedo类。如果用户打印页面，这也会使您的图标显示出来。我给你做了example。

Answer 3

您无法为背景图像指定右边或底边的距离。

实现所需效果的最简单方法是在图像中添加该空间。所以你要在warning_triangle.gif的右侧添加一些空白像素。这样，当您将它放置在div的右侧时，空像素将在右边缘对齐，而可见三角形将出现在距离边缘几个像素的位置。

编辑：

使用：after伪元素作为Per建议是一个我不知道的聪明的解决方案。请记住：IE 7及更早版本不支持此版本。因此，如果您需要支持这些旧版浏览器，这可能不是最佳解决方案。

Answer 4

您可以根据设计中需要的空间在Photoshop中剪切图像

Answer 5

要使其与右侧的 18px 填充保持一致，您可以使用 calc。

background-position-x: calc(100% - 18px);

Answer 6

以这种方式设置你的CSS

background-color: #F2EEBB;
background-image: url('http://confluence.jetbrains.net/download/attachments/33436/warningIcon.png');
background-position: right;
background-repeat: no-repeat;

Demo

Answer 7

我的解决方案：

article {
    padding: 0px 152px;
    background: transparent url('img.png') no-repeat right 152px top;
}

适用于IE9及更高版本。