是否可以使用剪辑隐藏CSS背景精灵图像的特定区域？

Question

使用clip可以隐藏CSSbackground image的特定区域吗？例如，我在图像上有多个图标，但我只想显示一个图标。因为Div区域大于图标大小，所以其他不需要的图标也显示出来。我可以隐藏它们而不用为该单个图标制作另一个图像吗？

的jsfiddle http://jsfiddle.net/jitendravyas/FyMW6/1/

Answer 1

基本上，您可以为每个图像创建一个容器，用于指定图像的区域。

http://jsfiddle.net/FyMW6/4/

HTML：

<div class="button"> 
    <div class="text">Lorem ipsum dolor sit amet</div> 
    <div id="house" class="icons"></div> 
</div> 

CSS：

.button {  
    width: 300px; 
    float: left; 
    border:1px solid red 
} 

.text { 
    float: left; 
    width: 245px; 
} 

.icons { 
    background-image: url("http://www.smtusa.com/uploads/cssexample.jpg"); 
    background-repeat: no-repeat; 

    width: 50px; 
    height: 50px; 
    float: right; 
} 

#house { 
    background-position: -56px -45px; 
} 

#gear { 
    background-position: -56px -106px; 
} 

Answer 2

不，我不这么认为，至少在CSS2。

您不能将clip属性应用于背景图像。

CSS3的 background-clip属性似乎正是你所需要的。不过，它目前只提供有限的浏览器支持。 CSS具有background-clip属性，但它只允许指定将图像渲染到哪个边界框。

除了使用另一个容器作为图标之外，可能没有解决方案。

Answer 3

最简单的方法是设置类来显示：无;