पृष्ठभूमि का आकार शॉर्टहैंड पृष्ठभूमि संपत्ति (CSS3) में

Question

मैं एक शॉर्टहैंड प्रॉपर्टी में मिक्स background-imageऔर background-sizeप्रॉपर्टीज की कोशिश कर रहा हूं background। W3C प्रलेखन के आधार पर स्लैश ( ) के साथ अलग की background-sizeगई background-positionसंपत्ति के बाद आना चाहिए /।

W3C उदाहरण:

p { background: url("chess.png") 40% / 10em gray
       round fixed border-box; } 

के बराबर है:

p {
    background-color: gray;
    background-position: 40% 50%;
    background-size: 10em 10em;
    background-repeat: round round;
    background-clip: border-box;
    background-origin: border-box;
    background-attachment: fixed;
    background-image: url(chess.png) }

एमडीएन एक ही बात कहता है। मुझे यह और यह आलेख समझाने वाली शॉर्टहैंड CSS3 की पृष्ठभूमि संपत्ति के बारे मेंभी मिला।

लेकिन यह काम नहीं कर रहा है! यह भी कि कैसे एक आशुलिपि बनाने के लिए स्पष्ट नहीं है backgroundसंपत्ति जब background-sizeऔर background-positionके लिए दो अलग-अलग मान background-position-xऔर background-position-yया के लिए एक ही बात background-size। यह स्पष्ट नहीं है कि स्लैश ( /) कैसे होता है? यह उदाहरण मेरे Chrome 15 में काम नहीं कर रहा है।

उदाहरण मैंने शॉर्टहैंड बनाने की कोशिश की है यह सीएसएस कोड है:

div {  
    background: url(http://www.placedog.com/125/125) 
        0 0 /  150px 100px 
        repeat no-repeat 
        fixed border-box padding-box blue;      
    height: 300px;
    width:360px;    
    border: 10px dashed magenta;  
}

एक क्लीनर उदाहरण

यह काम कर रहा है ( JSFiddle )

 body{
        background-image:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png);
        background-position:200px 100px;
        background-size:600px 400px;
        background-repeat:no-repeat;
    }

यह काम नहीं कर रहा है ( jsfiddle )

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px 100px/600px 400px no-repeat;
}

यह भी काम नहीं कर रहा है ( jsfiddle )

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px/400px 100px/600px no-repeat;
}

Comments

सफारी के खबरदार पृष्ठभूमि आकार आशुलिपि का समर्थन नहीं! सफारी इसका समर्थन नहीं करता है! सफारी को चोक करने से बचाने के लिए अपने बैकग्राउंड-साइज़ को अपने बैकग्राउंड से अलग रखें!

— जेफ

Answer 1

1. आपके jsfiddle background-imageबजाय का उपयोग करता हैbackground
2. यह "अभी तक इस ब्राउज़र द्वारा समर्थित नहीं" का मामला प्रतीत होता है।

यह ओपेरा में काम करता है: http://jsfiddle.net/ZNsbU/5/
लेकिन यह FF5 और IE8 में काम नहीं करता है। (पुराने ब्राउज़र के लिए याय: D)

कोड:

body {
  background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 200px / 600px 400px no-repeat;
}

आप इसे इस तरह से कर सकते हैं:

body {
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 400px no-repeat;
    background-size:20px 20px
}

जो FF5 और ओपेरा में काम करता है लेकिन IE8 में नहीं।

Comments

क्या आपको लगता है कि यह एक ब्राउज़र समर्थन मुद्दा नहीं है?

— Kraz

मुझे आश्चर्य है कि CSS3 के लिए सही विनिर्देश क्या है background?

— मोहसिन

यह वही है जिसे W3C ने परिभाषित किया है, ठीक वैसे ही जैसे आपके प्रश्न या मेरे कोड उदाहरण में है। यह अभी तक सभी ब्राउज़रों में लागू नहीं किया गया है।

— क्रेज

यह क्रोम कैनरी में काम नहीं कर रहा है। मुझे विश्वास नहीं हो रहा है कि यह अभी तक लागू नहीं हुआ है।

— मोहसिन

इस भाग के लिए उत्तर के रूप में चुना गया: यह "इस ब्राउज़र द्वारा अभी तक समर्थित नहीं" मामले का मामला प्रतीत होता है।

— मोहसिन

Answer 2

आप के रूप में कर सकते हैं

 body{
        background:url('equote.png'),url('equote.png');
        background-size:400px 100px,50px 50px;
    }

Comments

इसने मुझे सबसे अधिक मदद की; मुझे नहीं पता था कि आप पृष्ठभूमि आकार की घोषणाओं को अल्पविराम से विभाजित कर सकते हैं, इसके ऊपर प्रत्येक url के लिए।

— नथानिएल फ्लिक

Answer 3

संदर्भ के लिए बस एक नोट: मैं ऐसा करने के लिए आशुलिपि की कोशिश कर रहा था:

background: url('../images/sprite.png') -312px -234px / 355px auto no-repeat;

लेकिन iPhone सफारी ब्राउज़र एक निश्चित स्थिति तत्व के साथ छवि को ठीक से नहीं दिखा रहे थे। मैंने एक गैर-निश्चित के साथ जांच नहीं की, क्योंकि मैं आलसी हूं। मुझे पृष्ठभूमि के आकार के बाद पृष्ठभूमि के आकार को ध्यान में रखते हुए सीएसएस को नीचे की ओर ले जाना था। यदि आप उन्हें उल्टा करते हैं, तो पृष्ठभूमि छवि के मूल आकार की पृष्ठभूमि-आकार को बदल देती है। इसलिए आम तौर पर मैं बैकग्राउंड-साइज़ सेट करने के लिए शॉर्टहैंड का इस्तेमाल करने से बचता हूँ।

background: url('../images/sprite.png') -312px -234px no-repeat;
background-size: 355px auto;

Comments

यहाँ एंड्रॉइड 4.1.2 पर स्टॉक ब्राउज़र

— 17

Answer 4

इस तरह से प्रयास करें

body {
   background: #fff url("!--MIZO-PRO--!") no-repeat center 15px top 15px/100px;
     }


/* 100px is the background size */

Answer 5

आपको विभिन्न ब्राउज़रों का समर्थन करने के लिए विक्रेता उपसर्गों का उपयोग करना होगा और इसलिए इसे शॉर्टहैंड में उपयोग नहीं किया जा सकता है।

body { 
        background: url(images/bg.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Comments

यह सही नहीं है। मैं नहीं किया है कि अगर मैं नहीं है समर्थन पुराने ब्राउज़र चाहते विक्रेता उपसर्ग का उपयोग

— मोहसिन

यह विक्रेता उपसर्ग अभी भी काम करता है और कुछ ब्राउज़र ने हाल ही में इसे गिराया हो सकता है।

— मोईन ज़मान