सीएसएस पृष्ठभूमि रैखिक ढाल शीर्ष से नीचे

मैं की तरह ऊपर से नीचे तक एक रेखीय ढाल बनाने के प्रयास कर रहा हूँ:सीएसएस पृष्ठभूमि रैखिक ढाल शीर्ष से नीचे

Gradient I want!

दुर्भाग्य से मैं क्या मिलता है:

Gradient I get

निम्नलिखित मेरा HTML है:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test Page</title> 
    <link rel="stylesheet" href="test.css"> 
</head> 
<body> 
     Hi 
</body> 
</html>

और मेरे सीएसएस:

body{ 
    background: linear-gradient(0deg, white, blue 80%) ; 
}

मैं इस मिल अगर मैं 90deg, बजाय 0deg तो कार्य करें:

Gradient with 90deg

मैं इस ढाल की जरूरत है - लेकिन यह ऊपर से 90deg यानी द्वारा घुमाया जाना चाहिए बाएं से दाएं की बजाय नीचे तक। मुझे उत्सुकता है कि 0deg दोहराए गए ढाल के समान कुछ क्यों देता है।

मैंने ब्राउज़र, फ़ायरफ़ॉक्स 21 और क्रोम 27 का उपयोग किया है। मैं किसी भी सलाह के लिए आभारी हूं।

स्रोत

2013-06-18 O.O.

आपके शरीर की गणना की गई ऊंचाई क्या है? सीएसएस बॉडी को 100% ऊंचाई – jtheman

बजाय <html> पर पृष्ठभूमि सेट करने का प्रयास - प्रबंधन करने के लिए आसान हो सकता है । फिर इसे height:100%; दें, इसलिए यह सुनिश्चित करने के लिए कि पूरे पृष्ठ को विस्तारित किया गया है।

मैंने इसे no-repeat पर भी सेट किया है ताकि आपके पास लंबे समय तक सामग्री के नीचे शुरू होने के बजाय केवल एक ग्रेडियेंट प्राप्त हो।

html{ 
    height:100%; 
    background: linear-gradient(0deg, white, blue 80%) no-repeat; 
}

http://jsfiddle.net/daCrosby/nEQeZ/1/

संपादित

fr13d टिप्पणी में कहा, जब html पर ढाल डाल ढाल पहले पृष्ठ के नीचे, किसी भी स्क्रॉल करने से पहले पर बंद हो जाएगा। यही है, जब आप स्क्रॉल करते हैं तो ढाल बंद हो जाता है (ध्यान दें कि पृष्ठभूमि रंग ढाल के निचले रंग से अलग है)। इस के आसपास

एक तरीका यह बजाय body पर स्टाइल डाल करने के लिए है:

body{ 
    height:100%; 
    background: linear-gradient(0deg, yellow, blue 80%) no-repeat; 
}

http://jsfiddle.net/daCrosby/nEQeZ/117/

स्रोत

2013-06-18 22:27:44 DACrosby

यह पूरी तरह से काम करता है ** DACrosby **। धन्यवाद। –

थोड़ी देर हो चुकी है, लेकिन ऐसा लगता है कि यदि आपके स्क्रॉल करने के बाद, आपके '' में स्क्रीन के निचले भाग को विस्तारित करने के लिए पर्याप्त सामग्री शामिल है, तो नया हिस्सा जो देखने में आता है, उसके पास अब पृष्ठभूमि नहीं है। (जैसा कि आपके ढाल के निचले हिस्से में सफेद है, इससे आपके मामले में कोई फर्क नहीं पड़ता।) – fr13d

अच्छा बिंदु @ fr13d, मैंने अपना उत्तर – DACrosby

एक तरह से पूर्व के रूप में कोई भी नहीं है <body> और <html> तत्वों एक स्पष्ट ऊंचाई दे रहा है, और न ही किसी भी सामग्री:

http://jsfiddle.net/qL9mg/1/

स्रोत

2013-06-18 22:11:46 Adrift

पर सेट करने का प्रयास करें धन्यवाद ** एड्रिफ्ट **। यह काम की तरह लगता है। यदि आप इसे 'एचटीएमएल' के बिना करते हैं, तो बस 'बॉडी', तो यह काम नहीं करता है। आपको 'बॉडी' और 'html' दोनों निर्दिष्ट क्यों चाहिए? –

इसके अलावा, यदि आप नीचे स्क्रॉल करने के लिए स्क्रॉल बार का उपयोग करते हैं, तो इसमें एक गहरा नीली रेखा है। क्या हम इससे बच सकते हैं? –

@ ओ.ओ: क्योंकि ' 'पता नहीं है कि 100% ऊंचाई * रेफरिंग * है, क्योंकि प्रतिशत मान हमेशा किसी अन्य मान के सापेक्ष है, उदा। अपने माता-पिता की ऊंचाई। – Adrift

कोशिश यह:

html { 
    height: 100%; 
    background: linear-gradient(0deg, white, blue 80%) ; 
} 

body { 
    height: 0%; 
}

स्रोत

2014-06-30 13:02:25 teteArg

मैं @DACrosby से समाधान से सहमत हैं, लेकिन सलाह देते हैं 'निश्चित' के साथ पृष्ठभूमि का विस्तार करने के लिए। उस स्थिति में आपकी पृष्ठभूमि जगह पर रहेगी और आपके पास पूरी साइट के लिए शीर्ष पर न केवल ढाल होगी।

background: linear-gradient(0deg, red, blue 80%) fixed no-repeat;

स्रोत

2014-07-31 12:08:29 WebWorker

सीएसएस पृष्ठभूमि रैखिक ढाल शीर्ष से नीचे

उत्तर

संबंधित मुद्दे