Как сделать цвет фона div прозрачным? - PullRequest
Новая
       8

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

30 голосов
/ 19 января 2011

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

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

Ответы [ 4 ]

54 голосов
/ 19 января 2011

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

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

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

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

<ч /> Отредактировано для решения вопроса из OP (в комментариях):

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

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

14 голосов
/ 19 января 2011

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

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

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

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

2 голосов
/ 14 ноября 2017

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

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

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