Прозрачность в 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);
/* синтаксис 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 */ "

Тем самым вы осуществите эффект прозрачности картинки на половину.

Комментарии

Оставьте свой комментарий
Н
Николай

Добрый день, примеры по чекбокусу не работают, используются два класса, которых более нигде нет. - это .slide .spin

ВС
Владимир С.

Нужны примеры в картинках !

О
Оззи

очень помог, спасибо!!!!!

М
Миха

Большое спасибо за статью.

Э
Эльдар

@Алеш: Аналогично. Сделал полупрозрачным блок шириной 100%, в него поместил фиксированный блок который содержит изображения и текст которые не д.б. прозрачными. На всех браузерах все ок, а в IE все полупрозрачное.

<div id="socseti">
<div class="socsetidop">
<div class="socimg">#</div>
<div class="socimg">#</div>
<div class="socimg">#</div>
<div class="socimg">#</div>
<div class="soctxt"><h3>МЫ В СОЦИАЛЬНЫХ СЕТЯХ</h3></div>
</div>

css:
#socseti
{
width:100%;
height:76px;
background-color:#312f2f;
background:rgba(49,47,47,0.5);
filter:alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
z-index:0;
position:relative;
}

.socsetidop
{
width:1000px;
height:70px;
margin:0 auto;
opacity:1;
z-index:900;
position:relative;
}

.socimg
{
width:25px;
height:25px;
float:left;
margin-top:25px;
margin-right:5px;
z-index:100;
position:relative;
}

.socimg img
{
border:none;
margin:0 auto;
}

.soctxt
{
color:White;
width:300px;
height:40px;
margin-top:10px;
margin-left:15px;
float:left;
}

А
Андрей

Очень классно! Спасибо за инфу!

И
Игорь

Спасибо большое. Помогло

Т
Тт

Руками, как же еще. Блок с полупрозрачным фоном не должен содержать то, что вы не хотите, чтобы было прозрачным. Блок с непрозрачным вы уже потом стилями двигаете на фон.

А
Алеш

Вот этот вопрос меня тоже интересует. Как именно сделать прозрачный фон, а не прозрачное все?

P
Poruchick

Огромное спасибо за полезный материал!
Есть один вопрос: при описанных приёмах шрифт тоже становится полупрозрачным. А как сделать непрозразчный шрифт на полупрозрачном фоне?

Загрузить еще