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

CSS атрибуты, определяющие прозрачное изображение

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

<img src="../images/mustang.jpg" width="250" height="153" alt="" hspace="47" />

          <img src="../images/mustang.jpg" width="250" height="153" alt="" style="opacity:0.25;filter:alpha(opacity=25)" />

Результат:

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

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

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

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

<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" />

          <img src="../images/tt.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" />

          <a href="big_mustang.html" target="_blank" title="Открыть в новом окне">

          <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>

          <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 размер изображения, фон и рамка картинки

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

<head>

          <style type="text/css">

          img.primer {width:450px; height:397px; padding:10px; background:#eeeeee; border:1px solid #cccccc}

          </style>
 </head>

          <body>

          <p><img src="audi_big.jpg" class="primer" /></p>

          </body>

Результат:

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

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

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

width – ширина картинки.
height – высота картинки.
background – фон картинки.
padding – поля картинки.
border – рамка картинки.

Автор проекта - Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS изображение CSS прозрачное изображения CSS плавание картинки