सीएसएस

Question

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

तो क्या मैं चाहता हूँ यह है:

और नीचे आप देख इस

सूचना है कि ढाल बिल्कुल के रूप में पृष्ठ के तल पर एक ही लग रहा है करने के लिए स्क्रॉल के बाद यह शीर्ष पर करता है। यह पूर्ण पीले से पूर्ण लाल तक जाता है।

सबसे अच्छा मैं वास्तव में, ऐसा करने के लिए इस तरह ढाल अवधि सिर्फ देखने योग्य भाग के बजाय पेज की संपूर्ण सामग्री हो रही है कर सकती हूं:

और नीचे इस तरह दिखता है:

यहां ध्यान दें कि ढाल सामग्री की पूरी लंबाई फैलाता है, न कि वर्तमान में जो दिखाई देता है। तो पेज के शीर्ष पर आप अधिकतर पीले रंग के होते हैं और पृष्ठ के निचले हिस्से में आप अधिकतर लाल दिखते हैं।

मुझे लगता है कि मैं वाई विमान में फैली हुई छवि का उपयोग करके इसे हल कर सकता हूं और एक्स विमान में दोहराया जा सकता हूं, लेकिन यदि संभव हो तो मैं ऐसा नहीं करूँगा क्योंकि छवि को खींचने से एक अवरुद्ध, गैर दानेदार दिखने वाला ढाल हो सकता है। क्या यह सीएसएस के साथ गतिशील रूप से किया जा सकता है?

Answer 1

यदि आप CSS3 ग्रेडियेंट्स का उपयोग करके ऐसा करना चाहते हैं, तो चयनकर्ता को निम्नलिखित जोड़ने का प्रयास करें।

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

#background { 
    background: #1e5799; 
    background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); 
    background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); 
    background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); 
    background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); 
    background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0); 
    background-attachment: fixed; 
} 

Answer 2

html { 
    height: 100%; 
    /* fallback */ 
    background-color: #1a82f7; 
    background: url(images/linear_bg_2.png); 
    background-repeat: repeat-x; 

    /* Safari 4-5, Chrome 1-9 */ 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); 

    /* Safari 5.1, Chrome 10+ */ 
    background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 

    /* Firefox 3.6+ */ 
    background: -moz-linear-gradient(top, #2F2727, #1a82f7); 

    /* IE 10 */ 
    background: -ms-linear-gradient(top, #2F2727, #1a82f7); 

    /* Opera 11.10+ */ 
    background: -o-linear-gradient(top, #2F2727, #1a82f7); 
} 

http://css-tricks.com/examples/CSS3Gradient/
http://css-tricks.com/css3-gradients/

क्या आप समर्थन ब्राउज़र के आधार पर आप या एक छवि वापस आने नहीं चाहते हो सकता है हो सकता है। यदि नहीं, तो आप IE 6-8 के लिए अनुमति देने के लिए filter और -ms-filter वाक्यविन्यास शामिल करना चाहेंगे। यहां तक ​​कि इस छवि के बिना भी background-color

Answer 3

(वास्तविक छवि के साथ) ऐसा करने का एक और तरीका है:

background-attachment: fixed;

w3schools.org: CSS background-attachment property

आपके पूरे कोड की तरह लग सकता है

body { 
    background-attachment: local; // or 'fixed' here 
    background-image: url(fancy.jpg); 
    background-size: 100% 100%; 
    overflow:auto; 
    box-sizing:border-box; 
    width:100%; 
    height:100%; 
    margin:0; 
}