• 0

لماذا عند استخدام ال opacity تأثر على عناصر أخرى css؟

السلام عليكم ورحمة الله وبركاته 

أثناء نطبيقي على ال css قمت بوضع خلفية سوداء على الخلفية الأصلية وجعلت ال opacity الخاص بها .3 لكن النصوص الخاصة بهذه الصفجة أصبحت جميع ألوانها باهتة

أرجو حل هذه المشكلة ولكم جزيل الشكر 

index.zip

تمّ تعديل بواسطة عبدالباسط ابراهيم
تعديل العنوان
1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

وعليكم السلام ورحمة الله وبركاته

عندما تقوم بإستخدام الخاصية opacity على عنصر HTML معين فإنه يتم يتطبيقها على هذا العنصر وجميع العناصر التي بداخله.

وايضاً لا يوجد خاصية CSS لتعتيم الخلفية ، ولكن يمكنك تزييفها عن طريق إدخال عنصر زائف مع عتامة منتظمة بالحجم الدقيق للعنصر الموجود خلفه.

وهذا الكود الذي تقوم بإستخدامه لصفتحك:

.overlayer {
position: absolute;
width: 100%;
height: 100%;
}
.overlayer::after {
    content: "";
    background-color: black;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;   
}

وتستخدم خاصية opacity إذا كنت تريد إظهار عناصر خلف هذا العنصر ولكن إذا لم يكن هناك عناصر آخرى خلف هذا العنصر كما في حالتك فيمكنك بكل بساطة تقليل اللون فقط وفي حالتك الى اللون الرمادي.

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

عندما تستخدم خاصية opacity على عنصر معين فإن جميع العناصر (childs) ستتأثر بذلك 

في حالتك أنا بصراحة لا اعلم لماذا تريد استخدام خاصية opacity من الأساس 

هل ذلك من اجل تخفيف اللون الأسود ؟

الأفضل لك هنا هو أن تقوم بتقليل شفافية اللون الأسود وليس شفافية العنصر نفسه 

احذف خاصية opacity واستبدل اللون الأسود (black) باللون (#0000007a)

هنا قمت بتغيير شفافية اللون الأسود نفسه وليس العنصر 

وبهذا لن تتأثر بقية العناصر بالشفافية

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

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

وهذه الطريقة هي المفضلة لعمل ال overlay لاحظ التعديل 

<div class="homeSection">
  <div class="overlayer"></div>
  <div class="home-content"> <!--ووضعه بنفس المستوى overlayer  قمت بإخراج هذا العنصر من  -->
    <div>
      <h1 class="title">we are creative agency</h1>
      <p class="p"> <span class="nr">Nawwar</span> is an Egyptian IT-Training Center founded in 2012 We
        have identified the unique challenges people may face in learning a new technology and have
        exerted efforts in providing strategies to overcome them. We welcome your participation in our
        training
      </p>
      <button class="btn btn-start">Get started</button>
      <button class="btn btn-learn">Learn more</button>
    </div>
  </div>
</div>

وباستخدام هذه الطريقة لن تحتاج للتعديل في التنسيقات

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن