كيفية إضافة overlay للصورة؟

هل هي صورة في عنصر img أم هو عنصر div به خاصية background-image ؟

عموما يمكنك إستخدام خاصية ال opacity لجعل العناصر شفافة في css .

إذا كان عنصر image يمكنك إستخدام التالي :

img {
  opacity: 0.5;
}

ويمكنك تغير القيمة إلى الشفافية التي تريدها ولكن القيمة هي بين 0 و 1 .

أو يمكنك إنشاء عنصر backdrop أو overlay  وجعله هو الشفاف وليس الصورة إذا كنت تستخدم عنصر div مع خاصية background-image.

اعتقد أنك تقصد ال Overlays  أي إضافة طبقة شفافة أو نصف شفافة فوق المحتوى الأساسي لتحسين قراءة النص فوق الصورة وإليك مثال على ذلك 

<div class="image-container">
  <img src="your-image.jpg" alt="وصف الصورة" class="image">
  <div class="overlay"></div>
  <div class="overlay-text">نص فوق الصورة</div>
</div>

ثم ال css 

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

وبالتأكيد هناك العديد من الطرق الأخرى فيمكنك استخدام الطريقة التي تناسبك

الصورة موجودا في body 

لو أصبحت شفافة فسيظهر لون أبيض خلفها وهو اللون الإفتراضي، والشكل لن يكون جيد، ما تحتاجه هو تغيير لون الخط إلى اللون الأبيض، لكي يكون هناك تباين بين لون الخط والخلفية ويظهر بشكل جيد وواضح.

كحل آخر تستطيع إضافة خلفية شبه شفافة خلف الخط من خلال خاصية backdrop-filter وستحصل على تأثير يسمى frosted glass، فلو كود HTML كالتالي:

<div class="image-container">
 
  <div class="text-content-area">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dolore minus architecto porro vel quod ea odio voluptas aperiam nam doloribus id modi, ?corrupti est mollitia magni commodi doloremque hic.</p>
    <button class="action-button">أبدأ الآن</button>
  </div>
</div>

سنكتب التنسيق التالي:

.text-content-area {
  background-color: rgba(255, 255, 255, 0.15); 
 
  backdrop-filter: blur(8px) brightness(110%); 

  padding: 20px 30px;
  border-radius: 10px; 
  max-width: 600px; 
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.text-content-area p {
  color: black; 
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 20px; 
}