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

CSS3 के साथ एकाधिक पृष्ठभूमि जोड़ना

<घंटा/>

कई बैकग्राउंड जोड़ने के लिए, CSS में बैकग्राउंड-इमेज प्रॉपर्टी का इस्तेमाल करें। एकाधिक पृष्ठभूमि जोड़ने के लिए कोड निम्नलिखित है -

उदाहरण

<!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 में फ़िल्टर प्रभाव का उपयोग करने के लिए कोड निम्नलिखित है - उदाहरण img{ मार्जि

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

    2डी ट्रांस्फ़ॉर्म का उपयोग एलिमेंट स्ट्रक्चर को ट्रांसलेट, रोटेट, स्केल और स्क्यू के रूप में फिर से बदलने के लिए किया जाता है। कुछ 2D ट्रांसफ़ॉर्म फ़ंक्शन निम्नलिखित हैं - क्रमांक मूल्य और विवरण 1 मैट्रिक्स(एन,एन,एन,एन,एन,एन) छह मानों के साथ मैट्रिक्स रूपांतरण को परिभाषित करने के लिए प्रयुक

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

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