我正在为我的网站使用 sprite 图片，我的图标水平和垂直堆叠。
问题是当我尝试使用 sprite 图像中的一个特定 sprite 图标时，我不能只使用相应的 sprite 图标(在下面的 SS 中用蓝色圆 Angular )，而是我得到整个图像跨越我的 div 作为下面的截图
我想使用 padding-left 仅使用文本左侧的特定图标(我给了 30px)。我也尝试使用背景大小，但它不起作用。
请帮帮我。在此先感谢您的帮助。 我的代码是
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<!--START: Adding of javaScript library -->
<script type="text/javascript" src="/lib/jquery.min.js"></script>
<!--END: Adding of javaScript library-->
<style>
.sprite{
background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
padding-left:30px;
color:red;
}
</style>
</head>
<body>
<div class="">
<div class="sprite">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>
</body>
</html>
请参阅此 JS BIN 演示 http://jsbin.com/yojaj/1/edit
最佳答案
您需要在 sprite 类中添加宽度和高度规则，以匹配您需要的 sprite 中图标的大小。
还可以尝试将图标添加为伪元素 - 如下所示:
.sprite:before {
content:'';
display: inline-block;
background:url("http://lorempixel.com/400/200/food") -50px -50px no-repeat transparent;
margin-right:5px;
color:red;
width: 20px;
/* icon width */
height: 20px;
/* icon height */
vertical-align: middle;
}
关于html - CSS Sprite 图像背景问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22478601/