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