क्लिप का उपयोग कर सीएसएस पृष्ठभूमि स्प्राइट छवि के विशिष्ट क्षेत्र को छिपाना संभव है?

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> 

सीएसएस:

.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

नहीं, मैं ऐसा नहीं सोचता, कम से कम सीएसएस 2 में नहीं।

आप पृष्ठभूमि छवि में clip संपत्ति लागू नहीं कर सकते हैं।

CSS3 में background-clip संपत्ति है जो आपको वही करने की ज़रूरत है जो आपको चाहिए। हालांकि, इस समय सीमित ब्राउज़र समर्थन के साथ आता है। सीएसएस में background-clip संपत्ति है लेकिन यह केवल यह निर्दिष्ट करने की अनुमति देती है कि छवि को किस बाउंडिंग बॉक्स में प्रस्तुत किया गया है।

आइकन के लिए किसी अन्य कंटेनर को छोड़कर इसके लिए कोई समाधान नहीं हो सकता है।

Answer 3

सबसे आसान तरीका है प्रदर्शित करने के लिए वर्ग स्थापित करने के लिए है: कोई नहीं;