تقليل شفافية صورة الخلفيه في css

يمكن وضع الصورة بوسم img منفصل وتحديد حجمها  وتموضعها بالشكل المناسب، ثم التحكم بشفافيتها بشكل منفصل، لأن CSS لا يوفر خاصية شفافية للخلفية فقط بل سيؤثر ذلك على العنصر كاملًا مع أبناءه، لتكون الشيفرة كالتالي:

<div class="landing">
  <img src="../images/dd.jpg" >
  ...
</div>

والتنسيق لها كالتالي:

.landing {
  position: relative;
}

.landing img {
  opacity: 0.6;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

بجانب ما اقترحه المدرب حسن، يمكنك ايضا استعمال الصنف الزائف after:: او before:: لإنشاء عنصر بوضعية مطلقة position absolute تحكم في تموضعه:

.bg::after{
    background-image: url(path/to/image);
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    opacity:0.4;
    content:'';
}

لاحظ أن الحاوي يجب ان يمتلك الوضعية relative ايضا:

.container {
   position: relative;

}

يمكنك ايضا تشكيل الخلفية من طبقة بيضاء نتحكم في شفافيتها + صورة. يكون ذلك كـ:

.bg{
  background-size: cover;
  height: 500px;
  background: linear-gradient( rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7) ), url(imgage.jpg);
}

يعطي هذا نفس المقاربة ايضا.