Уроки web-программирования. CSS (HTML): Фильтры. Alpha.
В CSS есть очень мощное средство для управления графическими изображениями: фильтры. В общем, Фотошоп отдыхает. Сейчас мы убедимся в этом сами. И так, для эксперимента нам понадобятся две картинки. Можете скачать их отсюда вместе с исходниками примеров.
Вот как выглядит первая картинка:
А вот так вторая:
Для начала мы попробуем наложить одну картинку на другую при помощи фильтра прозрачности Alpha:
|
<html> <HEAD> <STYLE TYPE="text/css"> <!-- .cl1 { filter:alpha(opacity=0, finishopacity=100, style=1,startX=10, startY=10, finishX=100, finishY=100)) } div { position:absolute; } --> </STYLE> </HEAD> <BODY> <div> <img src="2.jpg"> </div> <div> <img src="1.jpg" class="cl1"> </div> </BODY> </html> |
В результате открытия такой файла в браузере вы увидите вот эту картинку:
Иными словами, у нас картинки наложились друг на друга. Каким образом мы этого достигли? Во первых, сделали позиционирование блоков div абсолютным:
|
div { position:absolute; } |
а так как обе картинки у нас в тегах div, то они оказались в одном месте. Применив к первой из них фильтр прозрачности, мы получили слияние изображения: вторая картинка частично видна из за первой.
Теперь немного подробнее о самом фильтра Alpha. Начнем с параметра opacity. Это начальный уровень прозрачности. finishpacity - конечный уровень прозрачности. Тоесть мы можем сделать картинку частично прозрачной, при чем прозрачность заполнит картинку градиентно, начиная с opacity и кончая finishpacity. Сделаем, например, opacity=30 и вот что мы увидим:
Следующий параметр style. Он определяет стиль заполнения градиента прозрачности. 0 - uniform, 1 - liner, 2- radial, 3 - rectangular. Вот как, например, выглядит радиальный градиент:
Параметры startX, startY, finishX, finishY определяют начальные и конечные координаты для градиентного совмещения картинок методом liner (style=1). Поставим, например, startX=70, startY=70 и вот что увидим:
Мы можем сделать и по другому, открыть часть картинки горизонтально, например, вот так будет выглядеть картинка при startX=0, startY=20, finishX=0, finishY=100:
