Использование изображений в CSS

Изображения играют важную роль на любой веб-странице. Хотя не рекомендуется включать много изображений, но по-прежнему важно использовать хорошие изображения, где это необходимо.

CSS играет хорошую роль для управления отображением изображения. Вы можете установить следующие свойства изображения с помощью CSS.

• Свойство border используется для установки ширины границы изображения.
• Свойство height используется для установки высоты изображения.
• Свойство width используется для установки ширины изображения.
• Свойство -moz-opacity используется, чтобы установить непрозрачность изображения.

Свойство Image Border

Свойство border используется для установки ширины границы изображения. Это свойство может иметь значение в длину или в %. Ширина нулевых пикселей означает отсутствие границы.

< html>
   < head>
   < /head>
   < body>
      < img style="border:0px;" src="/css/images/logo.png" />
      < br />
      < img style="border:3px dashed red;" src="/css/images/logo.png" />
   < /body>
< /html>

Свойство высоты изображения

Свойство height изображения используется для установки высоты изображения. Это свойство может иметь значение в длину или в %. Предоставляя значение в%, оно применяет его в отношении поля, в котором доступно изображение.

< html>
  < head>
   < /head>
   < body>
      < img style="border:1px solid red; height:100px;" src="/css/images/logo.png" />
      < br />
      < img style="border:1px solid red; height:50%;" src="/css/images/logo.png" />
   < /body>
< /html>

Свойство Ширина изображения

Свойство width изображения используется для установки ширины изображения. Это свойство может иметь значение в длину или в %. Предоставляя значение в %, оно применяет его в отношении поля, в котором доступно изображение.

< html>
   < head>
   < /head>
   < body>
      < img style="border:1px solid red; width:150px;" src="/css/images/logo.png" />
      < br />
      < img style="border:1px solid red; width:100%;" src="/css/images/logo.png" />
   < /body>
< /html>

Свойство -moz-opacity

Свойство -moz-opacity для изображения используется для установки непрозрачности изображения. Это свойство используется для создания прозрачного изображения в Mozilla. IE использует фильтр: alpha (opacity = x) для создания прозрачных изображений.

В Mozilla (-moz-opacity: x) x может быть значением от 0.0 до 1.0. Более низкое значение делает элемент более прозрачным (То же самое касается прозрачности синтаксиса CSS3: x).

В IE (filter: alpha (opacity = x)) x может быть значением от 0 до 100. Нижнее значение делает элемент более прозрачным.

< html>
   < head>
   < /head>
   < body>
      < img style="border:1px solid red;
		-moz-opacity:0.4;filter:alpha(opacity=40);"
		src="/css/images/logo.png" />
   < /body>
< /html>

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!