CSS repeating-linear-gradient() फ़ंक्शन
- पिछला पृष्ठ CSS repeating-conic-gradient() फ़ंक्शन
- अगला पृष्ठ CSS repeating-radial-gradient() फ़ंक्शन
- एक स्तर ऊपर सीएसएस फ़ंक्शन रेफरेंस मैनुअल
परिभाषा और उपयोग
CSS repeating-linear-gradient() फ़ंक्शन लीनियर ग्रेडिएंट को पुनरावृत्त करने के लिए उपयोग करता है。
उदाहरणः
| लीनियर ग्रेडिएंट | पुनरावृत्त लीनियर ग्रेडिएंट |
|---|---|
| linear-gradient(red, yellow, blue); | repeating-linear-gradient(red, yellow 10%, blue 20%); |
उदाहरण
उदाहरण 1
एक विक्षिप्त लीनियर ग्रेडिएंट:
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
उदाहरण 2
विभिन्न विक्षिप्त लीनियर ग्रेडिएंट:
#grad1 {
background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}
#grad2 {
background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}
#grad3 {
background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
}
CSS व्याकरण
repeating-linear-gradient(एंगल से साइड-या-कोर्नर, color-stop1, color-stop2, ...);
| मूल्य | वर्णन |
|---|---|
| एंगल | ग्रेडिएंट के दिशा को परिभाषित करता है। 0deg से 360deg तक। मूलभूत मूल्य 180deg है। |
| साइड-या-कोर्नर |
ग्रेडिएंट रेखा के शुरूआती स्थान को परिभाषित करता है। यह दो शब्दकोशों से मिला है: पहला स्तरांतर (बाईं या दायां) को प्रदर्शित करता है और दूसरा स्तरांतर (ऊपर या नीचे) को प्रदर्शित करता है। क्रम महत्वहीन है और प्रत्येक शब्दकोश अनिवार्य नहीं है। |
| color-stop1, color-stop2,... |
रंग अंतिम बिंदु आपको जिसके बीच समानता वाली पारगमन दिखाना चाहते हैं के रंग हैं। यह मूल्य रंग मूल्य और एक या दो वृद्धि करने वाले अवधारण (0% से 100% के बीच का प्रतिशत या ग्रेडिएंट अक्ष पर की लंबाई) से मिला है। |
तकनीकी विवरण
| संस्करण: | CSS इमेजेज़ मॉड्यूल लेवल 3 |
|---|
ब्राउज़र समर्थन
तालिका में नंबर इस फ़ंक्शन को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण के रूप में प्रदर्शित है।
| च्रोम | एज | फ़ायरफॉक्स | सफारी | ओपेरा |
|---|---|---|---|---|
| repeating-linear-gradient() | ||||
| 26 | 10 | 16 | 6.1 | 12.1 |
| दो जगहों का रंग अंतिम बिंदु | ||||
| 71 | 79 | 64 | 12.1 | 58 |
संबंधित पृष्ठ
तस्वीरीया शिक्षा：CSS ग्रेडिएंट
संदर्भ:सीएसएस बैकग्राउंड-इमेज गुण
संदर्भ:CSS conic-gradient() फ़ंक्शन
संदर्भ:CSS linear-gradient() फ़ंक्शन
संदर्भ:CSS radial-gradient() फ़ंक्शन
- पिछला पृष्ठ CSS repeating-conic-gradient() फ़ंक्शन
- अगला पृष्ठ CSS repeating-radial-gradient() फ़ंक्शन
- एक स्तर ऊपर सीएसएस फ़ंक्शन रेफरेंस मैनुअल
