CSS से हीरो इमेज बनाने का कोड निम्नलिखित है:
उदाहरण
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body, html { height: 100%; margin: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } *, *::before, *::after { box-sizing: border-box; } h1 { font-size: 60px; font-weight: bolder; } .heroContainer { background-image: linear-gradient( rgba(185, 255, 243, 0.5), rgba(31, 12, 117, 0.5) ), url("https://images.pexels.com/photos/670720/pexels-photo-670720.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000"); height: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .heroCaption { text-align: center; position: absolute; top: 20%; left: 45%; color: white; } .heroCaption button { border: none; outline: none; display: inline-block; padding: 20px; color: rgb(255, 255, 255); opacity: 0.8; font-size: 20px; background-color: rgb(47, 151, 21); text-align: center; cursor: pointer; } .heroCaption button:hover { opacity: 1; } </style> </head> <body> <div class="heroContainer"> <div class="heroCaption"> <h1>I am Shawn</h1> <h2>And I'm a Web Developer</h2> <button>Contact Me</button> </div> </div> </body> </html>आउटपुट
उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:
