Как создать эффект прозрачности картинке, баннеру, счётчику и т.п.

Посмотрите, как пример, счётчик посещаемости в подвале. При наведении курсора эффект прозрачности исчезает.

Из админ. панели заходим -> «Внешний вид» -> «Редактор» —> «Таблица стилей (style.css)». И в таблице стилей (style.css) в самом низу вставляем такой код:

/* прозрачность картинки ———————*/
#banners a img {
opacity:0.7; -moz-opacity:0.3;
filter:alpha(opacity=40);
}
#banners a:hover img {
opacity:1.0; -moz-opacity:1.0;
filter:alpha(opacity=100);
}
/* /прозрачность картинки ———————*/

Параметр «opacity» отвечает за степень прозрачности. Чем больше значение «opacity», тем менее прозрачным будет объект.Теперь объект, который вы хотите сделать прозрачным, нужно заключить в такой код:

<div id="banners">код объекта</div>

И все объекты, заключённые в этот код, будут иметь прозрачность, указанную параметром opacity.

Для того, чтобы несколько объектов имели разную прозрачность, нужно чтобы у каждого объекта был свой индивидуальный код в таблице стилей (style.css) и код, в который заключаем объект.

Например Вы хотите чтобы 2 картинки имели разную прозрачность.

Для этого в таблице стилей (style.css) для одной картинки код будет такой:

Красным цветом обозначены различия в кодах.

/* прозрачность картинки1 ———————*/
#banners1 a img {
opacity:0.7; -moz-opacity:0.3;
filter:alpha(opacity=40);
}
#banners1 a:hover img {
opacity:1.0; -moz-opacity:1.0;
filter:alpha(opacity=100);
}
/* /прозрачность картинки1 ———————*/а

А заключаться картинка будет в код:

<div id="banners1">код 1 картинки</div>

А для другой картинки код в таблице стилей (style.css) будет такой:

/* прозрачность картинки2 ———————*/
#banners2 a img {
opacity:0.4; -moz-opacity:0.3;
filter:alpha(opacity=40);
}
#banners2 a:hover img {
opacity:1.0; -moz-opacity:1.0;
filter:alpha(opacity=100);
}
/* /прозрачность картинки2 ———————*/

Заключаться картинка будет в такой код:

<div id="banners2">код 2 картинки</div>

Конец

Эта статья была опубликована в категории Уроки автором Zheka. Bookmark the permalink.

One ответ на “Как создать эффект прозрачности картинке, баннеру, счётчику и т.п.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>