Установите непрозрачность для меню, но оставьте текст непрозрачным в 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

Я не думаю, что это возможно, попробуйте этот пример: http://jsfiddle.net/578SV/

Answer 3

Вам понадобится либо прозрачное изображение 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 4

Вы не можете.Уровень прозрачности передается всем дочерним элементам.

Ваши параметры:

• Поместите другой элемент поверх li, возможно, используя position: absolute, чтоимеет обычную настройку непрозрачности

• Использование PNG-файла с альфа-прозрачностью для создания эффекта непрозрачности (понадобятся обходные пути для работы в IE6)

• Используйте новое свойство цвета rgba, как показано @hatkirby, если вы можете жить с неполной поддержкой браузера