我使用
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)您必须更改图像.图像中的图标必须低于另一个图标
