Уроки CSS

Прозрачное изображение и рамка изображения CSS

В этом уроке будет рассмотрен CSS атрибут регулирующий прозрачность изображения (а вернее – его блеклость). Этот атрибут называется - opacity: … ; Диапазон его значений от 0 до 1 - тоесть задаётся дробными числами.

Для демонстрации работы этого атрибута возьмём, ниже расположенное изображение

<style>
img.op_0 {
width: 120px;
height: 120px;
opacity:0.8;
}

img.op_1 {
width: 120px;
height: 120px;
opacity:0.6;
}

img.op_2 {
width: 120px;
height: 120px;
opacity:0.4;
}
</style>

 <img src="images/apple.jpeg" width="120" height="120"/> 
 <img src="images/apple.jpeg" class="op_0" /> 
 <img src="images/apple.jpeg" class="op_1" /> 
 <img src="images/apple.jpeg" class="op_2" /> 

А теперь сделаем пример, где в стилях опишем событие :hover.

Когда курсор мыши будет наведён на одно из изображений его прозрачность станет равной 1, а когда курсор отведён – значение атрибута opacity: будет равно 0.4. Помимо этого, в примере с помощью классов будет задана толщина и цвет рамки вокруг изображения (об этом рассказывается в одном из уроков HTML)

<style>
img.apple {
width: 120px;
height: 120px;
opacity:0.4;
border: 4px solid Green;
}

img.apple:hover {
opacity:1;
border: 4px solid Green;
}

img.tomato {
width: 120px;
height: 120px;
opacity:0.4;
border: 4px solid Red;
}

img.tomato:hover {
opacity:1;
border: 4px solid Red;
}

img.pear {
width: 120px;
height: 120px;
opacity:0.4;
border: 4px solid Yellow;
}

img.pear:hover {
opacity:1;
border: 4px solid Yellow;
}

img.orange {
width: 120px;
height: 120px;
opacity:0.4;
border: 4px solid Orange;
}

img.orange:hover {
opacity:1;
border: 4px solid Orange;
}
</style>

<table>
<tr>
<td align="center">Яблоко</td>
<td align="center">Помидор</td>
<td align="center">Груша</td>
<td align="center">Апельсин</td>
</tr>
<tr>
<td><img src="images/apple.jpeg" class="apple" /></td>
<td><img src="images/tomato.jpeg" class="tomato" /></td>
<td><img src="images/pear.jpeg" class="pear" /></td>
<td><img src="images/orange.jpeg" class="orange" /></td>
</tr>
</table>

Яблоко	Помидор	Груша	Апельсин

◄ Предыдущий урок

Содержание

Следующий урок ►