सीएसएस: एक छवि फ़ाइल से एक विशेष आइकन प्रदर्शित करना

Question

एक सीएसएस संपत्ति को एक बड़ी छवि से केवल एक विशेष आइकन लोड करने के लिए कैसे सेट करता है?

उदाहरण के लिए, jQuery यूआई निम्नलिखित पीएनजी छवि फ़ाइल का उपयोग करके अपने संवाद विजेट को थीम करता है: http://dev.jqueryui.com/browser/trunk/themes/base/images/ui-icons_2e83ff_256x240.png, जो इसमें आइकनों का एक गुच्छा एन्कोड करता है। फिर, http://docs.jquery.com/UI/Dialog में डेमो के रूप में नीचे दाएं आकार का हैंडल पीएनजी से बहुत अंतिम आइकन लोड करता है।

फायरबग का उपयोग करके मैं ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se जैसे सीएसएस गुणों का एक गुच्छा देख सकता हूं जो url(ui-icons.xx.png) को संदर्भित करता है, लेकिन किसी विशेष आइकन को चुनने के बारे में कुछ नहीं।

Answer 1

यह वास्तव में एक सीएसएस स्प्राइट तकनीक है।

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

उपयोग

background-position

संपत्ति एक पृष्ठभूमि छवि निर्दिष्ट किया गया है

हैं, तो इस संपत्ति अपने प्रारंभिक स्थिति निर्दिष्ट करता है। यदि केवल एक मान निर्दिष्ट है, तो दूसरा मान 'केंद्र' होने के लिए माना जाता है। यदि कम से कम एक मान कोई कीवर्ड नहीं है, तो पहला मान क्षैतिज स्थिति का प्रतिनिधित्व करता है और दूसरा लंबवत स्थिति का प्रतिनिधित्व करता है। नकारात्मक और मूल्यों की अनुमति है।

उदाहरण के लिए:

body { background: url("banner.jpeg") right top } /* 100% 0% */ 
body { background: url("banner.jpeg") top center } /* 50% 0% */ 
body { background: url("banner.jpeg") center }  /* 50% 50% */ 
body { background: url("banner.jpeg") bottom }  /* 50% 100% */ 

पृष्ठभूमि सीएसएस संपत्ति व्यक्तिगत पृष्ठभूमि संपत्ति की स्थापना के लिए एक आशुलिपि संपत्ति है शैली पत्रक में एक ही स्थान पर महत्व देता है। पृष्ठभूमि का उपयोग मानों को एक या अधिक के लिए सेट करने के लिए किया जा सकता है: पृष्ठभूमि-रंग, पृष्ठभूमि-छवि, पृष्ठभूमि-स्थिति, पृष्ठभूमि-दोहराव, पृष्ठभूमि-अनुलग्नक।

.PosBG { 
    background-image: url("logo.png"); 
    background-attachment: fixed; 
    background-position: 100% 100%; 
    background-repeat: no-repeat; 
} 

Answer 2

कुछ निम्नलिखित की तरह:

background-image: url('yourimage.png'); 
background-repeat: no-repeat; 
background-position: 25px 0px; 

पृष्ठभूमि स्थिति

Answer 3

लंगर तत्वों आकार निर्धारित किया जाता है और पृष्ठभूमि के लिए निर्धारित है के बारे में अधिक के लिए http://www.w3schools.com/css/pr_background-position.asp देखना छवि में सभी आइकन शामिल हैं लेकिन पृष्ठभूमि-स्थिति संपत्ति निर्दिष्ट है पृष्ठभूमि-छवि को स्थानांतरित करने के लिए एड ताकि छवि से केवल वांछित आइकन प्रदर्शित किया जा सके।

A List Apart's explaination of the technique पर एक नज़र डालें।