HTML-верстка: инструменты и приемы профессиональной front-end разработки

Степень прозрачности изображений


назад вперед

С помощью CSS вы легко можете создавать полупрозрачные изображения.


Примеры

Полупрозрачное изображение, реагирующее на мышь

Полупрозрачный блок с текстом


Заметка: приемы из данной главы пока не являются стандартом. Однако, они работают во всех современных браузерах и рекомендованы W3C как часть CSS 3.

Создание полупрозрачного изображения

Сначала посмотрите, как создается полупрозрачное изображение в CSS.

Обычное изображение:

Это же изображение, но с полупрозрачностью:

За полупрозрачность изображения отвечает следующий код:

<img src="../examples/css/image/nissan-big.jpg" width="160" height="120" style="opacity:0.4;filter:alpha(opacity=40)">

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. Меньше значение — изображение более прозрачное.

Ну что ж, поехали дальше...


Добавляем интерактивности

Поводите курсором мыши над изображениями:

klematis klematis

Изображение меняет прозрачность благодаря следующему коду:

<img src="../examples/css/image/nissan-big.jpg" alt="klematis" width="160" height="120" 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="../examples/css/image/bentley-big.jpg" alt="klematis" width="160" height="120"
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" />

Вы, наверно заметили, что первая строка кода сходна с первым примером. Мы добавили атрибуты onmouseover и onmouseout.

Атрибут onmouseover задает поведение элемента в тот момент, когда курсор мыши находится над ним. В этот момент нам хочется, чтобы изображение, так сказать, показало себя во всей красе, то есть чтобы оно было полностью видимо. Для этого мы задаем значение:для Firefox — this.style.opacity=1 и IE — this.filters.alpha.opacity=100.

Когда курсор мыши покидает границы изображения, мы хотим, чтобы изображение снова стало прозрачным. Для этого используется атрибут onmouseout.


Текст в полупрозрачном блоке

Это текст в полупрозрачном блоке. Это текст в полупрозрачном блоке. Это текст в полупрозрачном блоке. Это текст в полупрозрачном блоке. Это текст в полупрозрачном блоке.

Исходный код этого примера выглядит так:

<html>
<head>
<style type="text/css">
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;
}
</style>
</head>
<body>

<div class="background">
<div class="transbox">
<p>Это текст в полупрозрачном блоке.
Это текст в полупрозрачном блоке.
Это текст в полупрозрачном блоке.
Это текст в полупрозрачном блоке.
Это текст в полупрозрачном блоке.
</p>
</div>
</div>
</body>
</html>

Сначала мы создаем элемент div (class="background") с фиксированной высотой и шириной, фоновым изображением и рамкой. Затем мы создаем в этом блоке меньший блок (class="transbox"). Этот блок также имеет фиксированную ширину, фоновое изображение и рамку. Кроме того, мы делаем этот блок полупрозрачным.

В конце мы добавляем текст в полупрозрачный бокс.



Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта