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




картинки прозрачность (5)

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

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

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


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

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

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


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

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

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

Вы можете использовать обозначение 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() браузера CSS с ссылкой на демонстрационную и «более полную» таблицу совместимости .


Чтобы получить результат, который мне нужен, я обнаружил, что мне нужно использовать оба ::selection user-select и user-select

input.no-select:focus { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

input.no-select::selection { 
    background: transparent; 
}

input.no-select::-moz-selection { 
    background: transparent; 
}




css css3 opacity