Как сделать цвет фона div полупрозрачным?

Я хочу, чтобы цвет фона белого в моем div был полупрозрачным примерно на 50%. Содержимое должно быть полностью непрозрачным. Каков правильный способ сделать это? Я представил себе, когда я посмотрел на свойство фона CSS, я бы нашел параметр непрозрачности, но не сделал этого. Не волнует IE6.

ОБНОВЛЕНИЕ: решение с помощью решения rgba, приведенное ниже, в сочетании с решение CSS3PIE для работы rgba в браузерах IE.

Ответы

Ответ 1

Вы можете использовать обозначение background-color: rgba():

#theIdofYourElement,
.classOfElements {
    background-color: #fff;
    background-color: rgba(255,255,255,0.5);
}

Отредактировано, чтобы добавить значение по умолчанию background-color (для браузеров, которые не понимают нотацию rgba() ). Хотя у меня создалось впечатление, что все, кроме IE, это понимают (но я могу ошибаться и не проверял, чтобы быть уверенным...).

Отредактируйте с помощью @akamike.

Отредактировано для ответа на вопрос от OP (в комментариях):

какие браузеры не понимают rgba? будут ли они все в будущем, является ли эта часть css3?

Лучшая информация, которую я мог найти, это таблица поддержки браузера CSS rgba() , ссылка на демонстрационную и более полную таблицу совместимости.

Ответ 2

Если вы хотите непрозрачность кросс-браузера, вы можете обрабатывать каждый в своем определении css

div
{
    opacity: .50; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */
    filter: alpha(opacity=50); /* IE lt 8 */
    -ms-filter: "alpha(opacity=50)"; /* IE 8 */
    -khtml-opacity: .50; /* Safari 1.x */
    -moz-opacity: .50; /* FF lt 1.5, Netscape */
}

Ответ 3

Самый простой способ - создать полупрозрачный PNG и просто использовать его в качестве фонового изображения для div.

Если вы используете Photoshop (или аналогичные инструменты), просто создайте изображение размером 10 пикселей на 10 пикселей, которое является белым, а затем перетащите ползунок прозрачности до 50%. Сохраните его как PNG, и вы должны быть rockin '!

Использование RGBA также возможно, но вы не просто теряете IE6, тогда - все еще довольно много людей используют браузеры, которые не поддерживают альфа-схему.

Ответ 4

Существует свойство CSS, называемое backdrop-filter, обеспечивающее реальную прозрачность (в отличие от прозрачности, которая уже доступна в CSS).

В настоящее время поддерживается только Safari, но может быть добавлено в другие браузеры.

.my-selector {
   backdrop-filter: blur(5px);
}