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

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

обновление: решение с помощью решения rgba, приведенного ниже, в сочетании с решение CSS3PIE для получения rgba для работы в IE браузеры.

30
css css3 opacity

4 ответов

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

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

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

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

редактировать для решения вопроса из OP (in комментарии):

какие браузеры не понимают rgba? все они в будущем-это с помощью CSS3?

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

51

Если вы хотите непрозрачность кросс-браузера, вы можете обрабатывать каждый в своем определении 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 */
}
13

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

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

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

4

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

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

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