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

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

عندما تقوم بإستخدام الخاصية 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 إذا كنت تريد إظهار عناصر خلف هذا العنصر ولكن إذا لم يكن هناك عناصر آخرى خلف هذا العنصر كما في حالتك فيمكنك بكل بساطة تقليل اللون فقط وفي حالتك الى اللون الرمادي.

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

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

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

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

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

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

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

كما تم الشرح في التعليقات السابقة فالمشكلة أن العناصر بداخل 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>

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