اذهب إلى المحتوى

السؤال

نشر

انا قاعد اشتغل على موقع بسيط وحاليا أضفت سلايدر شو ولكن لدي مشكلة 

لدي content داخل كل سلايدر + صورة للخلفية واخدة حجم الشاشة كاملة
اريد عرض الصورة وتكون اكثر غمقا بدون ان يؤثر على النصوص في الcontent 

جربت اكثر من طريقة لكن الأمر لاينفع عندي لا أدري لماذا
 

ملفات المشروع رفعتها يمكنكم الأطلاع عليها

 

وشكرا جزيلا

 

Kabak Restaurant.rar

Recommended Posts

  • 0
نشر

الأمر بسيط عليك حذف خاصية filter من التنسيق التالي لديك:

.home .slide {
    min-height: 100vh;
    background-position: center !important;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* filter: brightness(50%); */
}

والسبب هو أنه يتم تقليل الإضاءة للمحتوى بالكامل داخل العنصر الأب.

وبدلاً منها استخدام خاصية opacity على الخلفية التي قمت بإنشائها كالتالي في العنصر الزائف before:

.home .slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--dark-bg);
    z-index: -1;
    opacity: .7; /*هنا*/
}

 

  • 0
نشر

يمكنك أيضا اضافة طبقة سوداء بحيث تتموضع بشكل نسبي داخل حاوية الصورة، فيكون:

<div class="img-container">
    <img src="path/to/your-image.png" />
    <div class="overlay"></div>
</div>

و لتعطها التنسيقات التالية:

.overlay{
    position: absolute;
    top:0;
    right:0;
    height:100%;
    width:100%;
}

أيضا لا تنسى إعطاء الحاوية الوضعية relative

.img-container{
    position: relative;
}

بهذا الشكل سوف يمكن للحاوية أن تحتوي طبقة سوداء تجعل الخلفية أو الصورة أكثر تعتيما. 

طبعا يمكنك التحكم في موضع الصورة على المحور z باستخدام الخاصية z-index.

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...