Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

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.





« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru