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

CSS3 से मल्टीपल बैकग्राउंड्स जोड़ना


मल्टीपल बैकग्राउंड्स जोड़ने के लिए, CSS में background-image प्रॉपर्टी का उपयोग करें। मल्टीपल बैकग्राउंड्स जोड़ने का कोड निम्न है -

उदाहरण

<!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {    background-image:    url("https://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3613.png"),    url("https://i.picsum.photos/id/256/1200/300.jpg");    background-position: left bottom, left top;    background-repeat: repeat, repeat;    padding: 15px; } p {    font-size: 18px; } </style> </head> <body> <h1>Multiple Backgrounds using CSS</h1> <div> <h1>Some Sample Text</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ipsum dolorem? Adipisci accusantium eveniet necessitatibus beatae est, dolorum nobis minima aliquam atque id at sapiente culpa, alias nulla rem. Aliquam, modi repellendus fugiat dolore, blanditiis praesentium quam doloribus possimus doloremque reprehenderit corporis enim distinctio, ducimus nisi. Voluptatum vel repudiandae omnis. </p> </div> </body> </html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -

CSS3 से मल्टीपल बैकग्राउंड्स जोड़ना


  1. CSS3 फ़िल्टर इफेक्ट्स के साथ काम करना CSS3 फ़िल्टर इफेक्ट्स के साथ काम करना

    CSS3 में फ़िल्टर इफेक्ट्स सेट करने के लिए, filter प्रॉपर्टी का उपयोग करें। निम्न फ़िल्टर इफेक्ट्स सेट किए जा सकते हैं -blur() | brightness() | contrast() | grayscale() | invert() | opacity() | saturate() | url();CSS3 में फ़िल्टर इफेक्ट्स का उपयोग करने के लिए कोड निम्न है -उदाहरण<!DOCTYPE html>

  1. CSS3 2D ट्रांसफॉर्म फंक्शन्स के साथ काम करना CSS3 2D ट्रांसफॉर्म फंक्शन्स के साथ काम करना

    2D ट्रांसफॉर्म्स का उपयोग एलिमेंट स्ट्रक्चर को ट्रांसलेट, रोटेट, स्केल और स्क्यू करने के लिए किया जाता है।निम्न कुछ 2D ट्रांसफॉर्म फंक्शन्स हैं -क्र.सं.मान और विवरण1matrix(n,n,n,n,n,n)छह मानों के साथ मैट्रिक्स ट्रांसफॉर्म्स परिभाषित करता है2translate(x,y)x-axis और y-axis के साथ एलिमेंट को ट्रांसफॉर्

  1. CSS3 3D ट्रांसफॉर्म फंक्शन्स के साथ काम करना CSS3 3D ट्रांसफॉर्म फंक्शन्स के साथ काम करना

    3D ट्रांसफॉर्म्स के साथ, हम एलिमेंट को x-axis, y-axis और z-axis पर मूव कर सकते हैं। CSS3 3D ट्रांसफॉर्म के कुछ तरीके निम्न हैं -3D ट्रांसफॉर्म्स को कॉल करने के लिए नीचे दिए गए मेथड्स का उपयोग किया जाता है -क्र.सं.मान और विवरण1matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)मैट्रिक्स के 16 मानों का उपयोग कर