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

सीएसएस के साथ छवि पर बटन सेट करें

<घंटा/>

आप छवि पर बटन सेट करने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं:

उदाहरण

<!DOCTYPE html>
<html>
   <head>
      <style>
         .box {
            position: relative;
            width: 100%;
            max-width: 250px;
         }
         .box img {
            width: 100%;
            height: auto;
         }
         .box .btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
         }
      </style>
   </head>
   <body>
      <div class = "box">
         <img src = "https://www.tutorialspoint.com/videotutorials/images/current_affairs_home.jpg" alt = "Current Affairs">
         <button class = "btn">Button</button>
      </div>
   </body>
</html>

  1. CSS के साथ एक बटन में पारदर्शिता जोड़ें

    एक बटन में पारदर्शिता जोड़ने के लिए, CSS अस्पष्टता गुण का उपयोग करें। यह बटन के लिए एक अक्षम रूप बनाता है। आप बटन में पारदर्शिता जोड़ने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं उदाहरण <!DOCTYPE html> <html>    <head>       <style>     &

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

    रेडियल-ग्रेडिएंट () CSS फ़ंक्शन के साथ, पृष्ठभूमि छवि के रूप में एक रेडियल ग्रेडिएंट सेट करें। आप CSS में रेखीय-ग्रेडिएंट () फ़ंक्शन को लागू करने के लिए निम्न कोड को चलाने का प्रयास कर सकते हैं उदाहरण <!DOCTYPE html> <html>    <head>       <style> &nb

  1. कैसे सीएसएस के साथ एक छवि के लिए एक बटन जोड़ने के लिए?

    सीएसएस के साथ एक छवि में एक बटन जोड़ने के लिए निम्नलिखित कोड है - उदाहरण img{ चौड़ाई:100%;}div { स्थिति:रिश्तेदार; चौड़ाई:100%; अधिकतम-चौड़ाई:400px;}div img {चौड़ाई:100%; ऊंचाई:ऑटो;} div बटन {स्थिति:निरपेक्ष; शीर्ष:50%; बाएं:50%; परिवर्तन:अनुवाद (-50%, -50%); पृष्ठभूमि-रंग:आरजीबी (64, 21, 133); रंग