从sprite中获取图像并添加到href中

我已将所有图标添加到sprite中。现在，我需要通过链接显示该精灵的一个图标。当我添加精灵并在链接上设置它的背景位置时，所有链接的背景都是精灵精灵。 enter image description here 从sprite中获取图像并添加到href中

a{ 
    background-image:url('sprite.png'); 
} 
.sprite_link_icon{ 
    padding-left: 20px; 
    background-position: -36px -10px 
} 
<a class="sprite_link_icon" href="">test link test</a>

如何设置精灵的宽度和高度，使之只显示一个图标？

是在“a”标签中添加两个div的唯一方法吗？首先，带有精灵图标和宽度和高度集的div，以及其他文本？

<a href=""> 
    <div class="sprite_link_icon" style="width: 10px; height: 10px;"></div> 
    <div>test link</div> 
</a>

来源

2013-05-06 lolalola

可能重复http://stackoverflow.com/questions/7777159/clip-crop-background-image-with-css） – Antony 2013-05-06 18:49:12

并带有正确的答案！ – Rudie 2013-05-06 18:54:38

你可以使用:before或:after实际背景移动到另一个（伪）元素，这正是一个图标的大小合适。

事情是这样的：

.icon { 
    /* nothing special here, just a dynamic element, 
    maybe with a fixed height? */ 
} 
.icon:before { 
    content: ''; 
    display: inline-block; 
    height: 16px; 
    width: 16px; 
    background: url(...) etc; 
    margin-right: .25em; /* might not be necessary due to inline-block */ 
}

小提琴：http://jsfiddle.net/rudiedirkx/RG3Kd/（使用错误的大小，因为我没有一个好的精灵方便）。

来源

2013-05-06 18:46:00 Rudie

就我而言，这是正确的答案。没有额外的HTML，可以回到IE7，并且如果精灵大小需要改变，可以轻松重新配置。 – 2013-05-06 19:17:29

你不能这样做，当你在做精灵时，你应该记住元素的宽度和高度会有多大。

当您在“a”标签中添加跨度并向其添加背景时，您可以避免出现问题，并且具有特定的宽度和高度。或者你可以重新安排你的精灵。

来源

2013-05-06 18:49:12 drip

使用此代码风格：

a 
    { 
     background-color:#00cc00; 
     padding-left:20px; 
     } 

    a span 
    { 
     background-color:#fff;    
     }

那么这个网站：

<a href="#"><span>test link</span></a>

[剪辑/作物与CSS背景图像（的

来源

2013-05-06 19:03:30 Ehsan

从sprite中获取图像并添加到href中

回答

相关问题