|
CSS Урок 26 Прозрачность Изображений
Создавать прозрачные изображения с помощью CSS проще простого.
 |
Примеры |
Создание прозрачных изображений - эффект при наведении мыши
Создание прозрачного блока с текстом на фоновом изображении
Замечание: Это пока не CSS стандарт. Однако, это работает во всех современных браузерах и является частью
W3C рекомендации по CSS 3.
Пример 1 - Создание Прозрачного ИзображенияСначала мы покажем вам как создать прозрачное изображение с помощью CSS.
Обычное изображение:
То же изображение с указанной прозрачностью:
Посмотрите на следующий исходный код:
<img src="klematis.jpg" width="150" height="113" alt="Цветок"
style="opacity:0.4;filter:alpha(opacity=40)" /> |
Браузер Firefox использует свойство opacity:x для указания прозрачности, в то время как IE использует filter:alpha(opacity=x).
Совет: Синтаксис CSS3 для указания прозрачности - opacity:x.
В Firefox (opacity:x) x может принимать значения в пределах 0.0 - 1.0. Меньшее значение делает элемент более прозрачным.
В IE (filter:alpha(opacity=x)) x может принимать значения в пределах 0 - 100. Меньшее значение делает элемент более прозрачным.
Пример 2 - Прозрачное Изображение - Эффект при наведении мышиЭффект при перемещении мыши над изображением:
Исходный код выглядит следующим образом:
<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="klematis2.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> |
Мы видим, что первая строчка кода подобна исходному коду в Примере 1. Также мы добавили
атрибут onmouseover и атрибут
onmouseout. Атрибут onmouseover определяет, что должно произойти, когда указатель мыши находится над изображением.
В этом случае мы хотим, чтобы изображение НЕ БЫЛО прозрачным, когда мы перемещаем указатель мыши над ним.
Синтаксис для этого примера в Firefox следубщий: this.style.opacity=1, а синтаксис в IE такой: this.filters.alpha.opacity=100.
Когда указатель мыши перемещается за пределы границ изображения, мы хотим, чтобы изображение вновь стало прозрачным.
Это делается в атрибуте onmouseout.
Пример 3 - Текст в Прозрачном Блоке
Это некоторый текст, расположенный в прозрачном блоке.
Это некоторый текст, расположенный в прозрачном блоке.
Это некоторый текст, расположенный в прозрачном блоке.
Это некоторый текст, расположенный в прозрачном блоке.
Исходный код примера:
<html>
<head>
<style type="text/css">
div.background
{
width:500px;
height:250px;
background:url(images/klematit.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
/* для IE */
filter:alpha(opacity=60);
/* CSS3 стандарт */
opacity:0.6;
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>Это некоторый текст, расположенный в прозрачном блоке.
Это некоторый текст, расположенный в прозрачном блоке.
Это некоторый текст, расположенный в прозрачном блоке.
Это некоторый текст, расположенный в прозрачном блоке.
</p>
</div>
</div>
</body>
</html> |
Сначала мы создаем элемент div (class="background") с фиксированными высотой и шириной,
фоновым изображением и границей.
Затем мы создаем элемент div поменьше (class="transbox") внутри первого элемента div.
Элемент div класса
"transbox" имеет фиксированную ширину, фоновый цвет и границу - и является прозрачным. Внутри прозрачного div элемента,
мы добавляем текст в элементе p.
|
