CSS Sprites - 仅使用一个图像作为元素的一部分的背景

Question

我使用CSS Sprite Technique的背景图片看起来像这样：

图标的CSS代码：

div.icon {
    background-color: transparent;
    background-image: url("/images/icons.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block;
    height: auto;
    vertical-align: text-top;
    width: auto;
}
div.icon:empty {
    width:16px;
    height:16px;
}
div.icon:not(:empty) {
    padding-left:20px;
}
div.icon.attenuation {
    background-position: 0 0;
}

我的图标可以像这样使用：

<div class="icon warning"></div>

我想在我的图标中添加一些文字，如：

<div class="icon warning">There is a warning on this page</div>

但问题是背景图片覆盖了整个文本区域：

问题是：我如何才能将图像的一部分用作我元素的一部分背景图像？

注意：

• 为width设置16px到div.icon无效。

Answer 1

请记住，在可能的情况下，您不应仅仅为了实现设计而更改标记。可以使用你的标记。

div.icon:before {
    content: "";
    background-color: transparent;
    background-image: url("/images/icons.png");
    display: inline-block;
    height: 16px;
    vertical-align: text-top;
    width: 16px;
}

div.icon:not(:empty):before {
    margin-right: 4px;
}

div.icon.attenuation {
    background-position: 0 0;
}

Answer 2

您有两种方式：

1）您的标记必须如下：

<div class="icon warning"></div><div class="txt">There is a warning on this page</div>
.icon {width:10px(for ex.)}

2）您必须更改图像。图像中的图标必须低于另一个

Answer 3

对不起，我以前的答案不太好。

编辑： 如果您有16px填充，则应将宽度设置为0，而不是16px。我有麻烦让:not(:empty)位适用于所有浏览器;更好地摆脱它。所以CSS变成了：

.icon {
  ...
  width:0; height:16px; padding-left:16px;
}
.icon:empty {
  width:16px; padding-left:0;
}

jsFiddle

Answer 4

设置width: 16px; height: 16px; overflow: hidden; text-indent: -9999em;并移除padding