सीएसएस स्प्राइट्स और पृष्ठभूमि की स्थिति का उपयोग

Question

मेरे पास एक div तत्व है, चौड़ाई 200px और ऊंचाई 200px के बारे में कहें। मुझे div के ऊपरी दाएं कोने पर दिखाई देने के लिए एक छोटी छवि चाहिए। कैसे एक सामान्य रूप से यह

background: url(/images/imagepath.png) top right; 

हालांकि समस्या यह है, मैं एक स्प्राइट से छवि लोड करने और कर रहा हूँ के साथ किया जाएगा करते हैं नहीं करता है से यह लेने के लिए लग रहे हैं जब मैं की तरह

background: url(/web/images/imagepath.png) -215px -759px top right; 

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

Answer 1

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

#yourimage { 
    background-image: url(/web/images/imagepath.png); 
    /* background coordinates */ 
    background-position: -215px -759px; 

    /* element coordinates */ 
    position:absolute; 
    left: 0; /* 0px from the left */ 
    top: 0; /* 0px from the top */ 
} 

background-position के साथ आप पृष्ठभूमि निर्देशांक निर्दिष्ट करते हैं। आपके तत्व के निर्देशांक के लिए, आपको left और right गुण सेट करने की आवश्यकता है।

ध्यान रखें कि sprites का उपयोग करने के लिए, आपका तत्व सही आकार का होना चाहिए। जिस पृष्ठभूमि में आप पृष्ठभूमि के रूप में उपयोग कर रहे हैं, उसके पास तत्व की चौड़ाई और ऊंचाई को कवर करने के लिए पर्याप्त स्थान होना चाहिए, अन्यथा नहीं, अन्यथा आप अपनी sprites छवि से एक से अधिक छवि देखेंगे।

यदि आप अपने तत्व से छोटी छवि प्रदर्शित करना चाहते हैं, तो आपको बड़े के अंदर एक छोटा तत्व चाहिए।

<div id="container"> 
    <div class="background"></div> 
    my content here 
</div> 

फिर अपने सीएसएस में

#container { 
    position:relative; 
    width: 200px; /* size of your big element */ 
    height: 200px; 
} 
#container .background { 
    background: url(/web/images/imagepath.png) -215px -759px; 
    width: 50px; /* width and height of the sprite image you want to display */ 
    height: 50px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Answer 2

आप या तो top right या एक सटीक पिक्सेल स्थिति निर्दिष्ट करते हैं, दोनों नहीं।

इसके अलावा, आप एक बड़े तत्व के लिए पृष्ठभूमि के रूप में उपयोग करने के लिए एक छवि स्प्राइट का एक छोटा सा हिस्सा लोड नहीं कर सकते हैं। आपको इसके अंदर एक छोटा सा तत्व रखना होगा, जिसमें स्प्राइट का आकार होगा।

Answer 3

आप इस तरह :before pseudoclass उपयोग कर सकते हैं:

.element:before { 
    content:""; 
    position:absolute; 
    right:0; 
    top:0; 
    width:20px; 
    height:20px; 
    background: url(/web/images/imagepath.png) -215px -759px; 
} 

लेकिन यह खराब अभी तक समर्थित है।

मेरी सलाह अपने रैप और यह स्थिति बिल्कुल सिर्फ :before ऊपर की तरह है, लेकिन उदाहरण के असली div

संपादित करें के लिए अंदर एक और तत्व बनाने के लिए है

बॉक्स कोनों में स्प्राइट का उपयोग करके की एक और मुश्किल रास्ता described here है।

Answer 4

पृष्ठभूमि मूल के बजाय पृष्ठभूमि स्थिति का उपयोग कर जांच।

आप केवल एक पृष्ठभूमि-स्थिति निर्दिष्ट कर सकते हैं, और अभी आपके पास दो (-215px -759px) और (शीर्ष दाएं) हैं।

Answer 5

आप एससीएसएस की तरह एक पूर्वप्रक्रमक का उपयोग कर सकते हैं:

(वास्तव में इस सवाल का जवाब करने के लिए अद्यतन की मांग की, यह भी live example देख)

// ----------- only things you need to edit { --------------- 
$sprite-size: 16px; // standard sprite tile size 
$sprite-padding: 0px; // if you have padding between tiles 
// ----------- } only things you need to edit --------------- 

// basic sprite properties (extension-only class) 
%sprite { 
    width:$sprite-size; height:$sprite-size; // must restrict viewport, otherwise other sprites may "bleed through" 
    // could set shared standard tilesheet `background-image: url(...)` 
    // other standard styles, like `display:inline-block` or `position:absolute` 
} 

// helper for assigning positioning using friendlier numbers like "5" instead of doing the math 
@mixin sprite-offset($xoffset:0, $yoffset:0, $increment:$sprite-size, $padding: $sprite-padding) { 
    background-position: -($xoffset*($increment + $padding)) -($yoffset*($increment + $padding)); 
} 

---

करने के लिए "फ्लोट" एक एक से पृष्ठभूमि the answer by @jose-faeti की तरह स्प्राइट इंगित करता है कि आपको involve a placeholder element

<div class="float-bg"> 
    <div class="bg"></div> 
    <p>Lorem ipsum dolor si...</p> 
</div> 

की तरह शैली के साथ:

.float-bg .bg { 
    @extend %sprite; // apply sizing properties 
    background-image: url(...); // actually set the background tiles 

    @include sprite-offset(4); 

    // specific configuration per accepted answer 
    position:absolute; 
    top: 0; 
    right: 0; 
} 

---

मेरी मूल जवाब में, create a list of buttons लिए आप:

// list out the styles names for each button 
$buttons: 'help', 'font', 'layerup', 'layerdown', 'transform', 'export', 'save', 'clear', 'move-left', 'move-right', 'move-up', 'move-down', 'png', 'jpg', 'svg', 'funky'; 

.btns > * { @extend %sprite; background-image:... } // apply sizing properties, bg 

// autoassigns positioning 
@for $i from 1 through length($buttons) { 
    $btn: nth($buttons, $i); 
    .btn-#{$btn} { 
     // @extend .sprite; 
     @include sprite-offset($i - 1); 
    } 
} 

तो something like पर काम करेगा:

<ul class="btns"> 
    <li class="btn-help">...</li> 
    <li class="btn-font">...</li> 
    <li class="btn-save">...</li> 
    <li class="btn-export">...</li> 
    <li class="btn-etc">...</li> 
    <li class="btn-etc">...</li> 
</ul>