Новые CSS уроки

Прозрачное изображение в CSS

Урок 21. Прозрачное 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)" />

Результат:

Картинка в css CSS картинка

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

Определяем 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 картинка и ее свойства размер картинки в пикселях

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>

Результат:

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

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

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

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 20. Список и изображение   CSS изображение   Урок 22. CSS обтекание

    Сохранить в сервисы и закладки