اضبط العتامة على القائمة ولكن الحفاظ على النص غير شفاف في CSS

Question

كيف يمكنني إنشاء قائمة فقط خلفيتها شفافة؟ يجب أن يحافظ النص على غير شفاف (العتامة: 1)

إذا قمت بتعيين

li:hover {
    opacity: 0.5
}

يصبح عنصر القائمة بأكمله شفافة. كيف يمكنني إصلاح ذلك؟

Answer 1

هناك قيمة جديدة في CSS3 تسمى "RGBA" تتيح لك استخدام لون شفاف كون خلفية. على سبيل المثال:

li:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

أنا متأكد تمامًا من أن هذا يجب أن ينجح ، على الرغم من أنني كتبت للتو الرمز على الفور حتى لا يكون كذلك. هذا ، مع ذلك ، يعطي قائمتك مسحة بيضاء لها. إذا كنت ترغب في قراءة المزيد عن RGBA ، انتقل هنا: http://css-tricks.com/rgba-browser-support/

Answer 2

ستحتاج إلى استخدام صورة PNG شفافة ، أو rgba قيمة اللون, ، ل <li>خلفية ، على سبيل المثال:

li:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

أو:

li:hover {
    background: url(a-nice-semi-transparent-png-image.png);

    /* Supplying just the image file here will make the browser repeat the image
    file vertically and horizontally, thus taking up all the space, just like a 
    colour would */
}

Answer 3

لا أعتقد ، هذا ممكن ، جرب هذا المثال: http://jsfiddle.net/578sv/

Answer 4

لا يمكنك. يتم تسليم مستوى الشفافية إلى جميع عناصر الأطفال.

خياراتك:

• ضع عنصرًا آخر فوق li, ، ربما باستخدام position: absolute, ، هذا لديه إعداد عتامة طبيعية

• استخدم ملف PNG مع شفافية ألفا لإنشاء تأثير العتامة (سوف تحتاج إلى حلول للعمل في IE6)

• استخدم الجديد rgba خاصية اللون كما هو موضح في Hatkirby ، إذا كنت تستطيع العيش مع دعم المتصفح غير المكتمل