С помощью CSS вы легко можете создавать полупрозрачные изображения.
Примеры
Полупрозрачное изображение, реагирующее на мышь
Заметка: приемы из данной главы пока не являются стандартом. Однако, они работают во всех современных браузерах и рекомендованы W3C как часть CSS 3.
Создание полупрозрачного изображения
Сначала посмотрите, как создается полупрозрачное изображение в CSS.
Обычное изображение:
Это же изображение, но с полупрозрачностью:
За полупрозрачность изображения отвечает следующий код:
Firefox использует свойство opacity:x, а IE — filter:alpha(opacity=x), где x — значение прозрачности.
Совет: правильным синтаксисом для прозрачности в CSS3 является opacity:x.
В Firefox (opacity:x) x может иметь значение 0.0 — 1.0. Чем ниже это значение, тем более прозрачно изображение.
В IE (filter:alpha(opacity=x)) x, как вы уже, наверно, поняли может принимать значение 0 — 100. Меньше значение — изображение более прозрачное.
Ну что ж, поехали дальше…
Добавляем интерактивности
Поводите курсором мыши над изображениями:
Изображение меняет прозрачность благодаря следующему коду:
Вы, наверно заметили, что первая строка кода сходна с первым примером. Мы добавили атрибуты onmouseover и onmouseout.
Атрибут onmouseover задает поведение элемента в тот момент, когда курсор мыши находится над ним. В этот момент нам хочется, чтобы изображение, так сказать, показало себя во всей красе, то есть чтобы оно было полностью видимо. Для этого мы задаем значение:для Firefox — this.style.opacity=1 и IE — this.filters.alpha.opacity=100.
Когда курсор мыши покидает границы изображения, мы хотим, чтобы изображение снова стало прозрачным. Для этого используется атрибут onmouseout.
Текст в полупрозрачном блоке
Это текст в полупрозрачном блоке. Это текст в полупрозрачном блоке. Это текст в полупрозрачном блоке. Это текст в полупрозрачном блоке. Это текст в полупрозрачном блоке.
Исходный код этого примера выглядит так:
div.background { width: 500px; height: 250px; background: url(image/audi-big.jpg) repeat; border: 2px solid black; } div.transbox { width: 400px; height: 180px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; filter:alpha(opacity=60); opacity:0.6; } div.transbox p { margin: 30px 40px; font-weight: bold; color: #000000; }
Это текст в полупрозрачном блоке. Это текст в полупрозрачном блоке. Это текст в полупрозрачном блоке. Это текст в полупрозрачном блоке. Это текст в полупрозрачном блоке.
Сначала мы создаем элемент div (class=»background») с фиксированной высотой и шириной, фоновым изображением и рамкой. Затем мы создаем в этом блоке меньший блок (class=»transbox»). Этот блок также имеет фиксированную ширину, фоновое изображение и рамку. Кроме того, мы делаем этот блок полупрозрачным.
В конце мы добавляем текст в полупрозрачный бокс.