کیساتعریف کریں: شفاف متن والا تصویر

کیساتعریف کریں کہ کیسے سی ایس ایس کا استعمال کرکے شفاف (نیم شفاف) پس منظر متن والا تصویر بنایا جاتا ہے。

شفاف تصویر متن کیساتعریف کریں

پہلے قدم - ایچ تی ایم ایل اضافہ کریں:

<div class="container">
  <img src="notebook.jpg" alt="Notebook" style="width:100%;">
  <div class="content">
    <h1>heading</h1>
    <p>Lorem ipsum..</p>
  </div>
</div>

دوتمام - سی ایس ایس اضافہ کریں:

.container {
  position: relative;
  max-width: 800px; /* زیادہ سے زیادہ چوڑائی */
  margin: 0 auto; /* اس کو وسط میں لایا جاتا ہے */
{}
.container .content {
  position: absolute; /* کالمقابل دیدار کا مقام */
  bottom: 0; /* پائین میں ہے۔top:0 کا استعمال کرکے اسے اوپر باندھنا ہے */
  background: rgb(0, 0, 0); /* بازگشتی رنگ */
  background: rgba(0, 0, 0, 0.5); /* 0.5 شفافیت کا کالامقابل دیدار */
  color: #f1f1f1; /* سورمائی متن */
  width: 100%; /* پورا چوڑائی */
  padding: 20px; /* بعض الهوامش الداخلية */
{}

جرب بنفسك