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

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

Ваши варианты:

• Место другой элемент на вершине li, возможно, с использованием position: absolute, который имеет настройку

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

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

Answer 3

Вам нужно использовать либо прозрачный PNG изображение, или rgba colour value, на фоне <li> «s, например:

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

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