Geek Answers Handbook

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

Is it possible to hide a specific area CSS background imagewith clip? for example, I have several icons in the image, but I want to show only one icon. Since the Div area is larger than the size of the icon, other unnecessary icons are also displayed. Can I hide them without creating another image for this single icon?

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

enter image description here

+5
source share
3 answers

Basically, you create a container for each image that 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;
}
+4

, , , CSS2.

clip .

CSS3 background-clip, , , , . . CSS background-clip, , .

, .

+3

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

-1
source

More articles:


All Articles