CSS3 ग्राडेंट्स पिक्सेल द्वारा, प्रतिशत

Question

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

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

क्या प्रतिशत-परिभाषित ढाल के बजाय पिक्सेल-परिभाषित ढाल का उपयोग करना संभव है?

Answer 1

हाँ आप कर सकते हैं। आप प्रतिशत के स्थान पर मानक इकाइयों को प्रतिस्थापित कर सकते हैं। इस उदाहरण देखें:

http://dabblet.com/gist/1856111

background: linear-gradient(left, #729fcf 10px, #4c7bb4 20px, #3465a4 63%, #204a87 100%); 

अद्यतन

आपको ऊपर के उदाहरण का उपयोग करने के ब्राउज़र उपसर्गों को शामिल करने की जरूरत है।

background-image: -webkit-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -moz-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -o-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -ms-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 

Answer 2

आप एक निश्चित-आकार ढाल है इसके आकार को निर्दिष्ट करने के background-size संपत्ति उपयोग करना चाहते हैं: वे इस प्रकार निर्दिष्ट किया जाएगा।