Для началa pазберёмся, как правильно внедрить код css в html страницу, чтобы можно было наблюдать требуемый эффект. Если вы хотите применить эффект к некоторым определённым картинкам (на самом деле можно сделать прозрачными не только картинки, но и фон), то лучше всего внедрить стиль в тэг картинки.
opacity – это и есть тот самый параметр который создаёт эффект прозрачности. В приведённом примере, который справедлив лишь для IE, opacity может принимать значения от 0 до 100. Если значение близко к нулю, то картинка максимально прозрачна, и наоборот при увеличение значения данного параметра картинка приобретает исходный вид.
IE Итак для создания эффекта прозрачности в IE вы можете использовать следующие css коды:
В зависимости от значения startx можно наблюдать различную степень осветлённости. Если значение близко к нулю, то картинка максимально прозрачна, и, наоборот, при увеличение значения данного параметра картинка приобретает исходный вид.
Возможен ещё один способ осветления, но с более резкими границами.
В зависимости от значения 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 */ "
Тем самым вы осуществите эффект прозрачности картинки на половину.
