CSS雪碧图像背景问题
CSS雪碧图像背景问题
提问于 2014-03-18 11:53:13
我在我的网站使用精灵形象，我的图标是水平和垂直堆叠。
问题是，当我尝试从sprite图像中使用一个特定的sprite图标时，我不能只使用相应的sprite图标(在下面的SS中以蓝色四舍五入)，相反，我得到了整个图像正在跨越我的div，如下面的屏幕所示。
我只想使用特定的图标在左边的文字使用填充-左(我给了30 of )。我也试过使用背景尺寸，它不起作用。
请帮我这个忙。提前感谢您的帮助。我的代码是
<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演示http://jsbin.com/yojaj/1/edit
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-03-18 12:01:29
您需要在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;
}小提琴
Stack Overflow用户
发布于 2014-03-18 12:01:38
您需要为.sprite类指定宽度和高度，例如
<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;
width:10px;
height:20px;
color:red;
}
</style>
</head>
<body>
<div class="">
<div class="sprite">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>
</body>
</html>Stack Overflow用户
发布于 2014-03-18 12:03:23
习惯了这个
定义html sprate图标类如下所示
.sprite{
background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
padding-left:30px;
width:10px;
height:20px;
}<div class="">
<div>
<span class="sprite"></span> // add this icon try this way
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>比只为css这样做
.sprite{
position:relative;
}
.sprite:after{
content:"";
position:absolute;
left:0;
top:0;
background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
padding-left:30px;
width:10px;
height:20px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22478601
复制相关文章
相似问题
腾讯云开发者
