كيفية إنشاء: صورة تحتوي على نص شفاف

تعلم كيفية استخدام CSS لإنشاء صورة تحتوي على نص شفاف (نصف شفاف).

كيفية إنشاء نص صورة شفافة

الخطوة الأولى - إضافة 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 {
  الوضع: نسبي;
  أقصى العرض: 800px; /* أقصى عرض */
  ال边际: 0 auto; /* تحديد في الوسط */
}
.container .content {
  الوضع: مطلق; /* تحديد نص الخلفية */
  الأسفل: 0; /* في الأسفل. استخدم top:0 لربطه في الأعلى */
  الخلفية: rgb(0, 0, 0); /* لون استبدال */
  الخلفية: rgba(0, 0, 0, 0.5); /* خلفية سوداء غير شفافة بنسبة 0.5 */
  اللون: #f1f1f1; /* نص رمادي */
  عرض: 100%; /* الكامل العرض */
  padding: 20px; /* بعض الهوامش الداخلية */
}

جرب بنفسك