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

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

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

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

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

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

Ширина в ноль пикселей означает отсутствие границы.

Вот пример -

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

Это даст следующий результат -

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

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

Вот пример -

<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 используетfilter: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>

Это даст следующий результат -