Непрозрачность в веб-страницах?

Question

Я вижу непрозрачность 60-80% в таблицах на сайтах. Они выглядят действительно круто, но я не уверен, почему они это делают. Это Javascript или изображение? Как изменить непрозрачность таблицы?

Answer 1

Вы можете сделать это в CSS, но для кросс-браузерной работы требуется небольшой взлом.

selector {
    filter: alpha(opacity=50); /* internet explorer */
    opacity: 0.5;           /* fx, safari, opera, chrome */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /*IE8*/
}

Answer 2

IE использует фильтр синтаксиса: alpha (opacity = 80), где более низкое значение делает элемент более прозрачным, в то время как Mozilla использует -moz-opacity: 0.8, где более низкое значение оказывает такое же влияние на прозрачность. То же самое касается прозрачности синтаксиса CSS3: 0,8;

Итак, это три свойства CSS, которые вам нужны.

Фильтр: альфа (непрозрачность = 80); // IE

непрозрачность: 0,8; // CSS3

-moz-непрозрачность: 0,8; // Mozilla

Answer 3

Вы также можете создать 32-битное PNG-изображение размером 1x1 пикселя, которое представляет собой, например, черный квадрат с требуемой непрозрачностью. Тогда в вашем css вы можете сделать ...

element
{
    background: url(/Images/Transparent.png) repeat;
}

Таким образом, вы можете избежать всех различных взломов. У вас могут быть проблемы с альфа-прозрачностью в IE6, но есть способы обойти это также

Answer 4

Непрозрачность может быть задана в CSS, но она поддерживается не всеми браузерами (в частности, более старой версией IE)

Answer 5

Если вам нужно широкое «кросс-браузерное» решение, кроме IE6 (полностью устарело), ​​оно всегда будет работать:

div {
    background-image: url('opacity.png');
}

С "opacity.png" прозрачным размером 1px x 1px PNG24

Он генерирует один дополнительный запрос к вашему серверу, но в большинстве случаев он полностью доступен.

Answer 6

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