چگونه ایجاد شود: تصویر با متن شفاف

آموزش نحوه ایجاد متن نوشتاری شفاف (نیمه شفاف) با استفاده از CSS در تصاویر.

تصویر متن شفاف

نروژ
عنوان

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="width:100%;">
  <div class="content">
    <h1>عنوان</h1>
    <p>Lorem ipsum..</p>
  </div>
</div>

مرحله دوم - اضافه کردن CSS:

.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; /* برخی فضاهای داخلی */
}

آزمایش کنید