Прозрачность картинки через стиль CSS
Причин добавить прозрачности элементам сайта может быть сотни, а вот решить эту задачу не так уж много. Главным образом, надо суметь обернуть объект в стиль CSS, либо отредактировать имеющийся.
Есть два параметра CSS, которые отвечают за регулировку прозрачности веб-элемента:
- opacity: xx;
- filter:alpha(opacity= xx);
Вся разница в том, что первый более универсальный — подходит для большинства браузеров, второй же напротив используется только всемействе Internet Explorer. Собственно, именно поэтому эти параметры используются попарно с равными значениями:
- xx = от 0,1 до 1;
- 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″», а далее код без изменений.
Вместо послесловия
Вот и всё, значения можно менять в пределах разумного, чтобы оставить видимым объект на странице. И как, нетрудно догадаться, во втором примере можно поменять местами параметры со значениями, так чтобы по наведению картинка принимала полу прозрачность, а не наоборот.
