फ़ंक्शन repeating-linear-gradient

फ़ंक्शन repeating-linear-gradient एक दोहराव वाला रैखिक ग्रेडिएंट सेट करता है। इसका मतलब है कि हम ग्रेडिएंट का एक निश्चित पैटर्न सेट करते हैं, उदाहरण के लिए, 0px से 10px तक - लाल से नीले रंग का ग्रेडिएंट और यह ग्रेडिएंट पूरे ब्लॉक पर दोहराया जाएगा: 0px से 10px तक, 10px से 20px तक, 20px से 30px तक और इसी तरह आगे भी।

यह फ़ंक्शन उन गुणों पर लागू होता है जो बैकग्राउंड इमेज सेट करते हैं: background, background-image या बॉर्डर इमेज: border-image, background-image-source.

सिंटैक्स

सिलेक्टर {
	background: repeating-linear-gradient([दिशा], रंग1 आकार1, रंग2 आकार2...);
}

मान

मान	विवरण
दिशा	कोणों की किसी भी इकाई में ग्रेडिएंट की एक निश्चित दिशा सेट करता है या कीवर्ड द्वारा `top`, `left`, `right`, `bottom` या उनके संयोजन द्वारा। शब्दों का क्रम महत्वपूर्ण नहीं है। पैरामीटर वैकल्पिक है: यदि इसे नहीं लिखा जाता है, तो ग्रेडिएंट ऊपर से नीचे की ओर जाएगा। दिशा से पहले `to` शब्द लगाया जाता है।
कोण	कोणों की किसी भी इकाई में कोण। यह सकारात्मक या नकारात्मक हो सकता है। पैरामीटर वैकल्पिक है। एक साथ या तो कोण सेट किया जा सकता है, या दिशा (या कुछ भी नहीं)।
रंग1	रंगों की किसी भी इकाई में ग्रेडिएंट का प्रारंभिक रंग।
रंग2	रंगों की किसी भी इकाई में ग्रेडिएंट का अंतिम रंग।
आकार	आकारों की किसी भी इकाई में ग्रेडिएंट के एक निश्चित रंग की लंबाई सेट करता है।

उदाहरण . सबसे सरल विकल्प

ग्रेडिएंट इस तरह दिखेगा: 0px से 20px तक शुद्ध लाल रंग, 20px से 40px तक - लाल से नीले रंग का ग्रेडिएंट। और यह ऊपर से नीचे तक दोहराया जाएगा (यही दोहराव वाला ग्रेडिएंट है):

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 20px, blue 40px);
	width: 400px;
	height: 200px;
}

उदाहरण . स्पष्ट रंग

ग्रेडिएंट इस तरह दिखेगा: 0px से 20px तक शुद्ध लाल रंग, 20px से 40px तक - शुद्ध नीला रंग (बात यह है कि दूसरा रंग वहाँ शुरू होता है जहाँ पहला रंग खत्म होता है)। और यह ऊपर से नीचे तक दोहराया जाएगा:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

उदाहरण . दिशा बदलें

अब ग्रेडिएंट की दिशा दाएँ से बाएँ होगी:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

उदाहरण . डिग्री में दिशा

दिशा के रूप में डिग्री में एक कोण सेट करेंगे:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

उदाहरण . नकारात्मक मान

दिशा को एक नकारात्मक मान बनाएंगे:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

यह भी देखें

फ़ंक्शन repeating-radial-gradient,
जो एक दोहराव वाला रेडियल ग्रेडिएंट बनाता है
फ़ंक्शन linear-gradient,
जो एक रैखिक ग्रेडिएंट बनाता है
फ़ंक्शन radial-gradient,
जो एक रेडियल ग्रेडिएंट बनाता है