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

Question

是否有可能隐藏的特定区域CSS background image使用clip？例如,我在图像上有多个图标,但我只想显示一个图标.因为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;
}