ఏర్పాటు చేయండి: పారదర్శక వచనం గల చిత్రం

CSS ద్వారా పారదర్శక (అర్ధ పారదర్శక) బ్యాక్‌గ్రౌండ్ వచనం చిత్రాన్ని ఏర్పాటు చేయడం నేర్చుకోండి.

పారదర్శక చిత్ర వచనం

Norway
శీర్షిక

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.

亲自试一试

పారదర్శక చిత్ర వచనం ఏర్పాటు చేయండి

మొదటి చర్య - HTML జోడించండి:

<div class="container">
  <img src="notebook.jpg" alt="Notebook" style="వెడల్పు:100%;">
  <div class="content">
    <h1>శీర్షిక</h1>
    <p>Lorem ipsum..</p>
  </div>
</div>

రెండవ చర్య - CSS జోడించండి:

.container {
  స్థానం: relative;
  గరిష్ట వెడల్పు: 800px; /* గరిష్ట వెడల్పు */
  మార్జిన్: 0 auto; /* దానిని మధ్యలో ఉంచండి */
}
.container .content {
  స్థానం: absolute; /* బ్యాక్‌గ్రౌండ్ వచనం నిర్ణయించండి */
  తక్కువస్థానం: 0; /* క్రిందికి. అప్పగించండి top:0 దానిని పైకి అనుసంధానించండి */
  బ్యాక్‌గ్రౌండ్: rgb(0, 0, 0); /* రిట్రీ రంగు */
  బ్యాక్‌గ్రౌండ్: rgba(0, 0, 0, 0.5); /* 0.5 అనుపాతం కాలిష్ట బ్లాక్ బ్యాక్‌గ్రౌండ్ */
  రంగు: #f1f1f1; /* ముదురు వచనం */
  వెడల్పు: 100%; /* పూర్తి వెడల్పు */
  padding: 20px; /* 一些内边距 */
}

亲自试一试