Урок 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)" />

Результат:

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

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>

Результат:

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