我使用 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
的width
设置为16px
没有帮助。
最佳答案
请记住,只要有可能,您不应该仅仅为了实现设计而更改标记。可以使用您的标记。
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;
}
关于html - CSS Sprites - 仅使用一张图像作为元素的一部分的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10481632/