css - पृष्ठभूमि में एक सीएसएस छवि खींचें और स्केल करें-केवल सीएसएस के साथ




background (12)

CSS3 में background-size:cover नामक एक अच्छी छोटी विशेषता है।

यह छवि को स्केल करता है ताकि पहलू अनुपात को बनाए रखने के दौरान पृष्ठभूमि क्षेत्र पृष्ठभूमि छवि द्वारा पूरी तरह से कवर किया जा सके। पूरे क्षेत्र को कवर किया जाएगा हालांकि छवि का हिस्सा दृश्यमान नहीं हो सकता है यदि आकार की छवि की चौड़ाई / ऊंचाई बहुत बढ़िया है

मैं चाहता हूं कि ब्राउजर व्यूपोर्ट आकार के आधार पर मेरी पृष्ठभूमि छवि खिंचाव और स्केल करें।

मैंने स्टैक ओवरफ़्लो पर कुछ प्रश्न देखे हैं जो उदाहरण के लिए स्ट्रेच और स्केल सीएसएस पृष्ठभूमि जैसे नौकरी करते हैं। यह अच्छी तरह से काम करता है, लेकिन मैं background का उपयोग कर छवि को रखना चाहता हूं, img टैग के साथ नहीं।

उसमें एक img टैग रखा जाता है, और फिर सीएसएस के साथ हम img टैग को श्रद्धांजलि देते हैं।

width:100%; height:100%;

यह काम करता है, लेकिन वह सवाल थोड़ा पुराना है, और कहता है कि सीएसएस 3 में पृष्ठभूमि छवि का आकार बदलना बहुत अच्छा काम करेगा। मैंने इस उदाहरण को पहली बार कोशिश की है, लेकिन यह मेरे लिए काम नहीं कर सका।

background-image घोषणा के साथ ऐसा करने के लिए कोई अच्छी विधि है?


आप border-image : yourimage उपयोग कर सकते हैं border-image : yourimage को border-image : yourimage को स्केल करने के लिए अपनी छवि, भले ही आप पृष्ठभूमि-छवि दें, फिर सीमा छवि उस पर खींची जाएगी।

सीमा-छवि संपत्ति बहुत उपयोगी है यदि आपकी स्टाइलशीट कहीं भी लागू की गई है जो CSS3 का समर्थन नहीं करती है। यदि आप फ़ायरफ़ॉक्स के क्रोम का उपयोग कर रहे हैं, तो मैं background-size:cover की सिफारिश करता हूं background-size:cover संपत्ति को background-size:cover


आप इसे अच्छी तरह से करने के लिए CSS3 प्रॉपर्टी का उपयोग कर सकते हैं। यह अनुपात में बदलता है इसलिए कोई छवि विकृति नहीं है (हालांकि यह छोटी छवियों को अपस्केल करता है)। बस ध्यान दें, यह अभी तक सभी ब्राउज़रों में लागू नहीं है।

background-size: 100%;

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


कंटेनर आकार के आधार पर उचित रूप से अपनी छवियों को स्केल करने के लिए निम्न है:

{
background-size:contain;
background-repeat: no-repeat;
}

क्या आप इसे सिर्फ एक छवि का उपयोग करना चाहते हैं? क्योंकि आप वास्तव में दो छवियों का उपयोग कर एक खींचती पृष्ठभूमि के समान कुछ कर सकते हैं। उदाहरण के लिए PNG छवियों।

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


मैं 100% चौड़ाई और ऊंचाई के साथ पूर्ण div में छवि से सहमत हूं। सुनिश्चित करें कि आप सीएसएस में शरीर के लिए 100% चौड़ाई और ऊंचाई निर्धारित करते हैं और शून्य पर मार्जिन और पैडिंग सेट करते हैं। इस विधि के साथ आपको एक और समस्या यह मिल जाएगी कि पाठ का चयन करते समय, चयन क्षेत्र कभी-कभी पृष्ठभूमि छवि को शामिल कर सकता है, जिसमें पूर्ण पृष्ठ को चुनने का दुर्भाग्यपूर्ण प्रभाव होता है। आप user-select:none का उपयोग करके इसे गोल कर सकते हैं user-select:none सीएसएस नियम नहीं, जैसे:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

दोबारा, इंटरनेट एक्सप्लोरर यहां खराब लड़का है, क्योंकि यह उपयोगकर्ता-चयन विकल्प को नहीं पहचानता है - यहां तक ​​कि Internet Explorer 10 पूर्वावलोकन भी इसका समर्थन नहीं करता है, इसलिए आपके पास पृष्ठभूमि छवि चयन को रोकने के लिए जावास्क्रिप्ट का उपयोग करने का विकल्प है (उदाहरण के लिए, http://www.felgall.com/jstip35.htm ) या सीएसएस 3 पृष्ठभूमि-खिंचाव विधि का उपयोग कर।

इसके अलावा, SEO मैं पृष्ठ के निचले हिस्से में पृष्ठभूमि छवि डालूंगा, लेकिन यदि पृष्ठभूमि छवि को लोड करने में बहुत लंबा समय लगता है (यानी, शुरुआत में एक सफेद पृष्ठभूमि के साथ), तो आप पृष्ठ के शीर्ष पर जा सकते हैं।


मैं इसका उपयोग करता हूं, और यह सभी ब्राउज़रों के साथ काम करता है:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>

मैंने जिस कोड का उल्लेख किया है उसका उपयोग करना ...

एचटीएमएल

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

सीएसएस

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

यह वांछित प्रभाव उत्पन्न करता है: केवल सामग्री स्क्रॉल करेगा, पृष्ठभूमि नहीं।

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

सीएसएस 3 के साथ ऐसा लगता है कि यह बहुत आसान होगा।



Backstretch प्लगइन का प्रयोग करें। एक भी कई छवियों स्लाइड हो सकता है। यह कंटेनरों के भीतर भी काम करता है। इस प्रकार उदाहरण के लिए पृष्ठभूमि की छवि के साथ पृष्ठभूमि का केवल एक हिस्सा हो सकता है।

चूंकि मैं इसे काम पर ला सकता हूं, यह साबित होता है कि यह प्लगइन का उपयोग करने में आसान है :)।


निम्नलिखित सीएसएस भाग को सभी ब्राउज़रों के साथ छवि को फैला देना चाहिए।

मैं प्रत्येक पृष्ठ के लिए यह गतिशील रूप से करता हूं। इसलिए मैं प्रत्येक पृष्ठ के लिए अपना स्वयं का HTML टैग जेनरेट करने के लिए PHP का उपयोग करता हूं। सभी चित्र 'छवि' फ़ोल्डर में हैं और 'Bg.jpg' के साथ समाप्त होते हैं।

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

यदि आपके पास सभी पृष्ठों के लिए केवल एक पृष्ठभूमि चित्र है तो आप $pic वैरिएबल को हटा सकते हैं, बैक-स्लेश से बचने, पथ समायोजित कर सकते हैं और इस कोड को अपनी सीएसएस फ़ाइल में रख सकते हैं।

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

यह इंटरनेट एक्सप्लोरर 9, क्रोम 21, और फ़ायरफ़ॉक्स 14 के साथ परीक्षण किया गया था।





background