背景图像中右对齐的填充

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 添加元素！）

- Naor

---

我不知道你是否能看到这张图片 - 如果不能，很抱歉，我的防火墙阻止了它。 - Naor

请查看我的回答，我感觉有些地方出现了延迟，请告诉我。 - w3uiguru

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;
}

- w3uiguru

---

谢谢！越简单越好。 - Naor

准确来说，如果在许多不同的字段上使用此类，并且您希望获得可预测的结果，则字段应该具有大致相同的宽度。较短的字段可能需要少于98％的宽度。 - PJ Brunet

Answer 2

你可以使用":after"伪类来实现。这也会使你的图标在用户打印页面时出现。我为你制作了一个示例。

- Per Salbark

---

这比使用背景图片的方式要好得多。 - harithski

Answer 3

为了使右侧填充保持18px的一致性，您可以使用calc函数。

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

- qwert

Answer 4

你不能指定背景图片距离右边或底部的距离。

实现所需效果最简单的方法是在图像本身中添加该空间。因此，您可以在 warning_triangle.gif 的右侧添加几个像素的空白空间。这样，当您将其定位到 div 的右侧时，空白像素将与右侧对齐，而可见的三角形将距离边缘几个像素。

编辑：

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

- Colin Kenney

Answer 5

您可以在Photoshop中根据设计需要裁剪该图像，以便获得所需的空间。

- sandeep

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;

演示

- Starx

Answer 7

我的解决方案：

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

适用于IE9及更高版本。

- mat

Answer 8

以下是ReactJS的代码：

background: `url(${Background}) white no-repeat 97%`,

或者

backgroundPositionX: '97%',

- Mujahidul Islam