कैसे बनाएं: हेरो इमेज

हेरो इमेज कैसे बनाएं

पहला कदम - HTML जोड़ें:

<div class="hero-image">
  <div class="hero-text">
    <h1>मैं बिल गेट्स हूँ</h1>
    <p>और मैं एक फोटोग्राफर हूँ</p>
    <button>मुझे रखें</button>
  </div>
</div>

दूसरा कदम - CSS जोड़ें:

body, html {
    height: 100%;
}
/* हेरो इमेज */
.hero-image {
  /* "linear-gradient" का उपयोग करके चित्र (photographer.jpg) पर गहरी रंग युक्त पृष्ठभूमि प्रभाव जोड़ें। इससे लेख पढ़ना आसान होगा */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");
  /* विशेष ऊंचाई सेट करें */
  height: 50%;
  /* चित्र को स्थानित करें और मध्य में रखें, ताकि सभी स्क्रीनों पर अच्छी तरह से फैलाया जा सके */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
/* चित्र के मध्य में लेख रखें */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: परिवर्तन(-50%, -50%);
  रंग: श्वेत;
}

अपने आप प्रयास करें