CSS عتامة وعناصر الطفل

Question

<style type="text/css">
div#foo {
    background: #0000ff;
    width: 200px;
    height: 200px;

    opacity: 0.30;
    filter: alpha(opacity = 30);
}
div#foo>div {
    color: black;
    opacity:1;
    filter: alpha(opacity = 100);
}
</style>

<div id="foo">
    <div>Lorem</div>
    <div>ipsum</div>
    <div>dolor</div>
</div>

في المثال أعلاه ، عتامة div#foo ورثته عناصر الطفل ، مما تسبب في أن يصبح النص غير قابل للقراءة تقريبًا. أفترض أنه من الخطأ القول بأنه ورث ، يتم تطبيق العتامة على Div الوالد والأطفال جزء من ذلك ، لذلك فإن محاولة تجاوزها للعناصر الفرعية لا تعمل لأنهم من الناحية الفنية غير شفافين.

عادةً ما أستخدم صورة خلفية Alpha PNG في مثل هذه الحالات ، لكنني اليوم أتساءل عما إذا كانت هناك طريقة أفضل لجعل خلفية شبه شفافة DIV دون التأثير على المحتويات.

Answer 1

يمكنك استخدام RGBA ().

div#foo
{
    background: rgba(0, 0, 255, 0.3);
}

لجعلها تعمل في استخدام المستكشفين على الإنترنت القدامى فطيرة CSS. هناك بعض القيود, ، ولكن يتم التعامل معها بطريقة متوافقة مع الوراء: سيتم تقديم قيمة RGB بشكل صحيح وسيتم تجاهل العتامة.

Answer 2

أفضل طريقة هي ضبط PNG شفافة على الخلفية ..

Answer 3

إذا كنت تستخدم العتامة ، فسيتعين عليك وضعها في Div منفصلة ثم قم بتجميعها معًا. سيكون للخلفية DIV أقل عتامة ، وسيكون لدى المقدمة المحتوى الخاص بك مع عتامة 100 ٪.