کیسے بنان: شفاف متن والا تصویر

سی ایس ایس کا استفادہ کرکے شفاف (نیم شفاف) بکگراؤند متن والا تصویر بنانے کا طریقہ سیکھو.

پرائیٹ ڈیجیٹل انسریپشن

ਨਾਰਵੇ
Heading

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.

亲自试一试

پرائیٹ ڈیجیٹل انسریپشن بنانے کا طریقہ

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

<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); /* نیم شفافیت کالر چراغی */
  color: #f1f1f1; /* کالر سورجی */
  width: 100%; /* پورا چوکیدار */
  padding: 20px; /* 一些内边距 */
}

亲自试一试