Вы здесь:   Главная » Вебмастеру    »    Прозрачность картинки через стиль CSS

Прозрачность картинки через стиль CSS

Причин добавить прозрачности элементам сайта может быть сотни, а вот решить эту задачу не так уж много. Главным образом, надо суметь обернуть объект в стиль CSS, либо отредактировать имеющийся.

Есть два параметра CSS, которые отвечают за регулировку прозрачности веб-элемента:

  1. opacity: xx;
  2. filter:alpha(opacity= xx);

Вся разница в том, что первый более универсальный — подходит для большинства браузеров, второй же напротив используется только всемействе Internet Explorer. Собственно, именно поэтому эти параметры используются попарно с равными значениями:

  1. xx =  от 0,1 до 1;
  2. xx = от 1 до 100.

Пример 1. Стиль для добавления прозрачности изображению

Как видно из рисунков выше, слева отображён оригинал изображения, а справа его копия с применённым стилем — 30% прозрачности.

Исходный код примера выглядит так:

<div style=»opacity: 0.7; filter: alpha(opacity=70);»><img src=»Logo-World-X.jpg» width=»150″ height=»89″ /></div>

Пример 2. Изменение прозрачности по наведению курсора

Тоже самое можно проделать, если добавить новый стиль в файл шаблона «Styles CSS», ещё и дополнить действием по наведению курсора:

.img1 {
opacity:0.7;
filter:alpha(opacity=70);
}
.img1:hover {
opacity:1;
filter:alpha(opacity=100);
}

Вторая часть стиля «img1:hover», как раз, и отвечает за наведение курсора. В нашем случае картинка будет иметь на 30% прозрачность в начале, и 100% после наведения на неё курсора мышки.

Чтобы обернуть код картинки в новый стиль добавьте после «<img» параметр класс «Class=»img1″», а далее код без изменений.

P.S.

Вот и всё, значения можно менять в пределах разумного, чтобы оставить видимым объект на странице. И как, нетрудно догадаться, во втором примере можно поменять местами параметры со значениями, так чтобы по наведению картинка принимала полу прозрачность, а не наоборот.

поделиться с друзьями:

обновлено: 27.06.2016

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

Подписаться на почтовую рассылку*
*политика конфиденциальности Google

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

Авторизоваться через: 

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

Ознакомиться с пользовательским соглашением

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: