كيفية تقليل الشفافية الخاصة بعنصر دون التأثير على النص بداخل العنصر

هل يمكنك ارفاق الكود الخاص بك؟

بتاريخ 4 دقائق مضت قال محمد أبو عواد:

هل يمكنك ارفاق الكود الخاص بك؟

New folder (4).zip

الوضع الطبيعي انك اذا قمت بتقليل الشفافية لأي عنصر فمن الطبيعي جميع العناصر التي بداخل هذا العنصر تقلق شفافيتها معه, ولكن هناك طريقة من الممكن استخدامه لفعل ذلك, يمكنك استخدام العناصر المزيفة before و after , وتضع العنصر الذي تريد تقليل شفافيته في العناصر المزيف، لاحظ الكود الذي لديك أنت

.caption {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    left: 0%;
    color: white;
    background-color: rgba(44, 35, 35, 0.5);
    opacity: .5;
}

سوف نقوم بانشاء عنصر مزيف كالتالي,

.caption::after{
    content: "";
}

أهم شيء في العنصر المزيف هو طريقة انشائه واستخدام الخاصية content لأنه بدون استخدامها لن يتم التعرف عليه, بعدها يمكنك اعطاء العنصر هذا أي تنسيقات تريدها, سوف نقوم بتعديل الكود كالآتي

.caption {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    left: 0%;
    color: white;

}
.caption::after{
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    left: 0%;
    color: white;
    background-color: rgba(44, 35, 35, 0.5);
    opacity: .5;
}

حاول فعل ذلك 

إن كانت الشفافية لديك متعلقة بلون الخلفية، لا تضع خاصية opacity لأنه يتم وراثتها في css للأولاد وتطبق عليهم

لذلك، استبدل الشيفرة التالية:

background-color: rgb(0,0,255); opacity: 0.5;
                  ^^^^          ^^^^^^^^^

بإضافة معامل الشفافية للون الخلفية لديك أي المعامل alpha في rgba:

background-color: rgba(0,0,255,0.5);
                  ^^^^         ^^^^

هذا يعطي نفس التأثير..

ربما تحتاج لعمل rgba مرتين مع إلغاء الشفافية اللونية للعنصر الابن:

.parent {
     background-color: rgba(0,0,0,0.5);
}

.child {
     background-color: rgba(128,128,128,0);
}