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

CSS से छवि की अस्पष्टता सेट करें

छवि की अस्पष्टता सेट करने के लिए, CSS -moz-opacity गुण का उपयोग करें। यह गुण मोज़िला में पारदर्शी छवि बनाने के लिए उपयोग किया जाता है। IE filter:alpha(opacity=x) का उपयोग करता है।

उदाहरण

निम्न कोड चलाकर CSS के साथ छवि को स्टाइल करें और अस्पष्टता सेट करें:

<html>
  <head>
  </head>
  <body>
    <img style="border:1px solid red;-moz-opacity:0.2;filter:alpha(opacity=50);"
      src="https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg" />
  </body>
</html>

आधुनिक ब्राउज़र्स के लिए मानक opacity गुण (0 से 1) का उपयोग करें।

  1. - CSS के साथ बॉर्डर इमेज की चौड़ाई सेट करें

    border-image-width प्रॉपर्टी का उपयोग CSS के साथ बॉर्डर इमेज की चौड़ाई सेट करने के लिए किया जाता है। उदाहरण border-image-width प्रॉपर्टी को लागू करने के लिए निम्नलिखित कोड आज़माएं: <html>    <head>       <style>          #borderim

  1. - CSS के साथ इमेज पाथ सेट करें

    CSS में इमेज पाथ सेट करने के लिए border-image-source प्रॉपर्टी का उपयोग किया जाता है। इमेज पाथ सेट करने के लिए निम्नलिखित कोड आज़माएं: उदाहरण <html> <head> <style> #borderimg1 { border: 15px solid transparent; padding: 15px; border-image-source: url(https://tutorialspoint.com/cs

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

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