| Рассмотрим сначала всевозможные эффекты прозрачности, которые будут видны только пользователям Internet Explorer.
К
примеру, есть у вас некая картинка, которая содержится в вашей html
странице. Данная картинка без участия каких-либо графических пакетов,
может быть видоизменена используя эффект прозрачности. Internet
Explorer обладает самыми широкими возможностями в этой области.
Рассмотрим все возможные примеры.
Для началa pазберёмся,
как правильно внедрить код css в html страницу, чтобы можно было
наблюдать требуемый эффект. Если вы хотите применить эффект к некоторым
определённым картинкам (на самом деле можно сделать прозрачными не
только картинки, но и фон), то лучше всего внедрить стиль в тэг
картинки.
<img border="0" src="src/logo.png" width="100" height="97" style="filter:alpha(opacity=30);" />
opacity – это и есть тот самый параметр который создаёт эффект прозрачности.
В
приведённом примере, который справедлив лишь для IE, opacity может
принимать значения от 0 до 100. Если значение близко к нулю, то
картинка максимально прозрачна, и наоборот при увеличение значения
данного параметра картинка приобретает исходный вид.
IE
Итак для создания эффекта прозрачности в IE вы можете использовать следующие css коды:
filter:alpha(opacity=30);
/* синтаксис IE4.0*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
/* синтаксис IE5.5+ (является предпочтительным) */
Более того при использовании IE можно получить красивые эффекты градиентного осветления. (в других браузерах не работает).
filter:alpha(opacity=80, style=0);
filter:alpha(opacity=80, style=1);
filter:alpha(opacity=80, style=2);
filter:alpha(opacity=80, style=3);
В зависимости от параметра style можно добиться различных градиентных осветлений.
Рассмотрим возможность осветления рисунка слева на право.
filter: alpha(startx=0, style=1);
filter: alpha(startx=20, style=1);
filter: alpha(startx=60, style=1);
filter: alpha(startx=100, style=1);
В зависимости от значения startx можно
наблюдать различную степень осветлённости. Если значение близко к нулю,
то картинка максимально прозрачна, и, наоборот, при увеличение значения
данного параметра картинка приобретает исходный вид.
Возможен ещё один способ осветления, но с более резкими границами.
filter: alpha(finishx=0, style=1);
filter: alpha(finishx=20, style=1);
filter: alpha(finishx=60, style=1);
filter: alpha(finishx=100, style=1);
Как можно видеть границы настолько резкие, что часть картинки при этом не видно и вовсе.
И наконец, пример правостороннего освещения.
filter: alpha(opacity=0, finishopacity=10, style=1);
filter: alpha(opacity=0, finishopacity=20, style=1);
filter: alpha(opacity=0, finishopacity=60, style=1);
filter: alpha(opacity=0, finishopacity=100, style=1);
В зависимости от значения finishopacity
можно наблюдать различную степень осветлённости. Если значение близко к
нулю, то картинка максимально прозрачна, и, наоборот, при увеличение
значения данного параметра картинка приобретает исходный вид.
Opera
Данный
браузер к сожалению не поддерживает того же обилия, как IE, но кое что
он всё таки может. Эффект прозрачности вы так же можете получить но при
этом придётся использовать уже другой код css.
opacity: 0.5;
Данный код так же сойдёт и для Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9.
В
зависимости от значения opacity (min=0, max=1) можно наблюдать
различную степень осветлённости. Если значение близко к нулю, то
картинка максимально прозрачна, и, наоборот, при увеличение значения
данного параметра картинка приобретает исходный вид.
Konqueror 3.1, Safari 1.1
Получение эффекта прозрачности в этих браузерах можно следующим путём.
-khtml-opacity: 0.5;
В зависимости от значения opacity
(min=0, max=1) можно наблюдать различную степень осветлённости. Если
значение близко к нулю, то картинка максимально прозрачна, и, наоборот,
при увеличение значения данного параметра картинка приобретает исходный
вид.
Mozilla
Как и opera, мозилла не слишком богата на эффекты. Получить прозрачность мы можем следующим образом.
-moz-opacity: 0.5;
В зависимости от значения -moz-opacity:
(min=0, max=1) можно наблюдать различную степень осветлённости. Если
значение близко к нулю, то картинка максимально прозрачна, и, наоборот,
при увеличение значения данного параметра картинка приобретает исходный
вид.
В итоге разобрав все возможные способы осуществления
эффекта прозрачности и изучив совместимость браузеров, мы можем
получить более или менее универсальный способ создания эффектов
совместимых со всеми браузерами.
Поместим в style следующее:
style=
"filter:alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */ "
Тем самым вы осуществите эффект прозрачности картинки на половину.
|
Копирование материалов разрешено,