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

Определяем CSS прозрачность изображения

Атрибуты и значения

  • opacity:0.25 – определяет прозрачность изображения. Значения: от 0 до 1.
  • filter:alpha(opacity=25) – параметр для Internet Explorer. Значения: от 0 до 100.
  • hspace="" – определяет дополнительные отступы от изображения по горизонтали.
  • alt="" – определяет альтернативный текст. Нужно прописывать даже пустой атрибут.

Рассмотрим следующий код:

 <h2>Определяем CSS прозрачность изображения</h2>


<img src="../images/gt-3.jpg" width="250" height="153" alt="" hspace="21" vspace="15"
style="opacity:0.25;filter:alpha(opacity=25)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<br />
<a href="big_mustang.html" target="_blank"  title="Открыть в новом окне"> <br />&lt;img src="../images/mustang.jpg" width="250" height="153"
alt="Открыть в новом окне"  hspace="21" vspace="15" border="0"
style="opacity:0.25;filter:alpha(opacity=25)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/></a>
<br />
<img src="../images/subaru.jpg" width="250" height="153" alt=""  hspace="21" vspace="15"
style="opacity:0.25;filter:alpha(opacity=25)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />




 

Проведите указателем мыши по картинкам внизу:

картинка и ее размер
картинка и ее фон
CSS картинка и ее свойства
размер картинки в пикселях

CSS размер изображения, фон и рамка картинки

рассмотрим следующий пример:

<img src="../images/audi_big.jpg" vspace="4" alt="красивая картинка" style="width:450px; height:397px; padding:10px; background:#eeeeee; border:1px solid #cccccc" />
 

 

 

Результат:

красивая картинка

Обозначайте реальный размер изображения, чтобы не искажать начальное качество.

Описание значений атрибутов

  • width ширина картинки.
  • height высота картинки.
  • backgroundфон картинки.
  • padding поля картинки.
  • border рамка картинки.
RSS
Нет комментариев. Ваш будет первым!
OyO