Is it possible to hide the specific area of a CSS background sprite image using clip?

Is it possible to hide the specific area of a CSS background image using clip? for example I have multiple icons on image but I want to show only one icon. Because area of Di开发者_Go百科v is greater then the icon size so other unneeded icons are also showing. Can I hide them without making another image for that single icon?

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

Basically you create a container for each image which you use to dictate the area of the image.

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;
}

No, I don't think so, at least not in CSS2.

You can't apply the clip property to a background image.

CSS3 has the background-clip property that seems to do exactly what you need. It comes with limited browser support at the moment, though. CSS has the background-clip property but it allows only to specify which bounding box the image is rendered in.

There may be no solution for this except using another container for the icon.

easiest way is to set the class to display: none;