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

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

ОТВЕТЫ

Ответ 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*/
}

Ответ 2

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

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

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

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

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

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

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

С "opacity.png", являющимся прозрачным PNG24 размером 1px x 1px

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