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

我使用 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>

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

问题是：我如何只使用图像的一部分作为我元素的一部分的背景图像？

笔记：

> div.icon的宽度设置为16px没有帮助.

解决方法

你有两种方式：

1)您的标记必须如下：

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

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