Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS में रैखिक ग्रेडिएंट दोहराएं

CSS repeating-linear-gradient() फ़ंक्शन का उपयोग करके रैखिक ग्रेडिएंट को बार-बार दोहराएं, जिससे पैटर्न बनते हैं।

उदाहरण

<!DOCTYPE html> <html>    <head>       <style>          #demo {             height: 300px;             background: repeating-linear-gradient(green 20%, orange 40%, maroon 40%);          }       </style>    </head>    <body>       <p>Repeating linear gradient.</p>       <div id = "demo"></div>    </body> </html>

व्याख्या: ग्रेडिएंट हरा (20%), नारंगी (40%), मैरून (40%) पर रुकता है, फिर दोहराता है, जिससे धारीदार पैटर्न बनता है।

  1. - CSS में repeating-linear-gradient() फ़ंक्शन का उपयोग

    repeating-linear-gradient() फ़ंक्शन का उपयोग रैखिक ग्रेडिएंट को दोहराने के लिए किया जाता है। यह एक पैटर्न बनाता है जो निर्दिष्ट रंग स्टॉप्स को अनंत बार दोहराता है। उदाहरण <!DOCTYPE html> <html> <head> <style> #demo { height: 300px; background:

  1. - CSS के साथ रेडियल ग्रेडिएंट को पृष्ठभूमि छवि के रूप में सेट करें

    radial-gradient() CSS फ़ंक्शन का उपयोग करके रेडियल ग्रेडिएंट को पृष्ठभूमि छवि के रूप में सेट करें। यह फ़ंक्शन एक केंद्र बिंदु से बाहर की ओर फैलने वाला ग्रेडिएंट बनाता है। उदाहरण <!DOCTYPE html> <html> <head> <style> #demo { height: 200px; back

  1. CSS से स्क्रॉल पर ग्रेडिएंट बैकग्राउंड कलर कैसे बनाएं? CSS से स्क्रॉल पर ग्रेडिएंट बैकग्राउंड कलर कैसे बनाएं?

    CSS से स्क्रॉल पर ग्रेडिएंट बैकग्राउंड कलर बनाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <style>    body {       height: 250vh;       color: white;       font-family: "Segoe UI", Tahoma,