Установите непрозрачность в меню, но сохраните текст непрозрачным в 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 с Alpha Transparency, чтобы создать эффект непрозрачности (потребуются обходные пути для работы в IE6)

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