कम्पास स्प्राइट पृष्ठभूमि स्थिति नहीं है क्योंकि मुझे यह चाहिए

Question

मैं पहली बार कम्पास स्प्राइटिंग का उपयोग कर रहा हूं। मैं आइकन छवियों (सभी आकारों में थोड़ा अलग हैं) केंद्रित स्थिति चाहते थे। संलग्न छवि की तरह

मैं इस सेटिंग

$icons-spacing:40px; 
@import "icons/*.png"; 
@include all-icons-sprites; 

सीएसएस मैं हो रही है का उपयोग कर रहा (उदाहरण के लिए)

.icons-adventure { 
    background-position: 0 -608px; 
} 

ऐसा नहीं है कि के रूप में मैं की आवश्यकता नहीं है । मैं ऊपर और बाएं से अधिक दूरी देना चाहता हूँ।

Answer 1

$icons-spacing जेनरेट किए गए स्प्राइट मानचित्र में प्रत्येक छवि को अलग करने वाले पिक्सल की संख्या को परिभाषित करता है। मेरा मानना ​​है कि आप $icons-position जो समायोजित कर देता है (ऑफसेट) उत्पन्न background-position शैलियों

समायोजित करना चाहते हैं

Answer 2

सबसे पहले, एक अच्छा सवाल ...

जब आप सीएसएस में स्प्राइट देते हैं, आप के साथ कक्षाओं उत्पन्न करने में सक्षम हो जाएगा .image-name। और इस तरह कम्पास काम करता है। आपकी छवि को एक बड़ी स्प्राइट छवि में जोड़ा जाएगा, और सभी अनियमित छवियों को एक ग्रिड तरीके से एक साथ जोड़ा जाएगा।

भले ही $icons-spacing आपको ग्रिड को कुछ पैडिंग देने की क्षमता देता है, तो यह आपके लिए इस मामले में रखना आसान नहीं होगा। तो, जो उत्पन्न होता है उसके साथ आगे बढ़ते हुए, हम निम्नलिखित करेंगे।

तो, अगर आप तस्वीर की तरह कुछ चाहते हैं, तो आपको तत्व को केंद्र में रखना होगा, जिसमें कम्पास उत्पन्न वर्ग है।

अब, मान लीजिए कि आप उस में adventure.png है और यह इस वर्ग उत्पन्न किया है:

.icons-adventure { 
    background-position: 0 -608px; 
} 

अब आप इस केंद्रित करना चाहते हैं, तो आप इस तरह से बना सकते हैं।

<div class="border"> 
    <i class="icons-adventure"></i> 
</div> 

और border कक्षा के लिए, पैडिंग दें। तो, मेरा मतलब यह है कि, आपने पर .border लपेट लिया है। अब, आपको कुछ पैडिंग और चौड़ाई देने की जरूरत है।

.border {padding: 15px; width: 40px;} 

यहां, ऊंचाई की कोई आवश्यकता नहीं है, क्योंकि ऊंचाई स्वचालित रूप से देखभाल की जाती है। स्पष्ट स्पष्टीकरण प्राप्त करने के लिए मुझे आपके लिए एक पहेली के साथ आने दो।

Answer 3

आप इस गीथब गिस्ट को देखना चाह सकते हैं: https://gist.github.com/adamlogic/3577147, जिसने मुझे अतीत में अंकुरित मुद्दों को ठीक करने में मदद की है और कम्पास कार्यों में स्प्राइटिंग की बेहतर समझ हासिल करने में भी मदद की है।

विशेष रुचि आप वह हिस्सा, जहां लेखक निम्न का उल्लेख किया जा सकता है के

: (यहाँ चिपकाया मामले में सार निकाल दिया जाता है)

"मैं इस एक सा आगे मेरे अपने (स्प्राइट) को परिभाषित करते हुए ले गया mixin।"

$spritemap-spacing: 50px 
@import "spritemap/*.png" 

=background-sprite($name, $repeat: no-repeat, $offset-x: 0, $offset-y: 0) 
    background-image: $spritemap-sprites 
    background-repeat: $repeat 
    +sprite-background-position($spritemap-sprites, $name, $offset-x, $offset-y) 

    // if no offsets given, set the dimensions of the element to match the image 
    @if $offset-x == 0 and $offset-y == 0 
    +sprite-dimensions($spritemap-sprites, $name) 

" और मैं इसे कैसे उपयोग कर रहा हूँ "

// simplest case; sets the background image and dimensions of the element 
h3 
    +background-sprite(ribbonfull) 

// custom offset; does not set the dimensions of the element 
h2 
    +background-sprite(ribbonend, no-repeat, 3px, 22px) 

// repeating backgrounds are possible, too 
#positions 
    +background-sprite(doubleline, repeat-x, 0, 45px) 

और, लेखक का उत्पन्न सीएसएस:

h3 { 
    background-image: url('/images/spritemap-sb826ca2aba.png'); 
    background-repeat: no-repeat; 
    background-position: 0 -405px; 
    height: 29px; 
    width: 295px; } 

h2 { 
    background-image: url('/images/spritemap-sb826ca2aba.png'); 
    background-repeat: no-repeat; 
    background-position: 3px -296px; } 

#positions { 
    background-image: url('/images/spritemap-sb826ca2aba.png'); 
    background-repeat: repeat-x; 
    background-position: 0 -751px; } 

Answer 4

मैं दो तरीके दिए पाया है इस मुद्दे के लिए, दोनों सही नहीं हैं:

1. आप अपने छवि संपादक में आवश्यक पैडिंग के साथ आइकन को आसानी से सहेज सकते हैं - यह काम करता है यदि आप इसे केवल एक ही स्थान पर उपयोग करना चाहते हैं, अन्यथा आपको डुप्लिकेट बनाना होगा (यही कारण है कि यह हमेशा काम नहीं करता है) ।
2. अन्य समाधान स्यूडोलेमेंट्स का उपयोग करना है। मान लिया जाये कि तत्व आप के लिए पृष्ठभूमि जोड़ना चाहते है और आप माउस में अपने माउस रखा है फ़ोल्डर:

@import "icons/*.png"; 

el { 
    position: relative; 
} 

el:after { 
    content: ""; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    @include icons-sprite(some_icon); 
    margin-top: - round(icons-sprite-height(some_icon)/2); 
    margin-left: - round(icons-sprite-width(some_icon)/2);  
} 

Answer 5

आप अपने आइकन के आकार का पता यदि आप के लिए एक डिफ़ॉल्ट ऊंचाई सेट कर सकते हैं सभी चिह्न और एकल माउस एक ऊर्ध्वाधर देने की भरपाई (डिफ़ॉल्ट ऊंचाई - आइकन ऊंचाई)/2 और स्थिति क्षैतिज केंद्र के साथ:

$sprite-spacing: 50px; 
@import "compass/utilities/sprites"; 
@import "sprite/*.png"; 
@include all-sprite-sprites; 
$sprite: sprite-map("sprite/*.png", $spacing: 50px); 

@include sprite-sprite(myicon); 
@include sprite-background-position($sprite, myicon, center, 12px); 

Answer 6

आप बूटस्ट्रैप 3 का उपयोग कर रहे हैं, बस निम्नलिखित कोड का उपयोग, अपने सरल और साफ,

एस.ए.एस.एस. फ़ाइल

@import "compass"; 
$home-spacing : 10px; 
$home-sprite-dimensions : true; 
@import "web/images/home/*.png"; 
@include all-home-sprites; 

और HTML/स्लिम फ़ाइल मैं सिर्फ center-block ट्विटर बूटस्ट्रैप 3, मेरे एचटीएमएल सहायक द्वारा प्रदान का उपयोग में,

=content_tag('div','',:class=>'home-save_money center-block') 

असल में यह सिर्फ में छवियों को संरेखित केंद्र div का केंद्र, ऊपर दिए गए सभी उत्तर कुछ कस्टम मिक्सिन या एक हैक का उपयोग करते हैं।

पुनश्च: अगर आप चहचहाना बूटस्ट्रैप का उपयोग न, बस नीचे दिए सीएसएस का उपयोग करें, कि, चाल करना होगा

display: block; 
margin-left: auto; 
margin-right: auto; 

मुझे आशा है कि यह कुछ एक में मदद करता है,