Учебники

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

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

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

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

  • Свойство height используется для установки высоты изображения.

  • Свойство width используется для установки ширины изображения.

  • Свойство -moz-opacity используется для установки непрозрачности изображения.

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

Свойство height используется для установки высоты изображения.

Свойство width используется для установки ширины изображения.

Свойство -moz-opacity используется для установки непрозрачности изображения.

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

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

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

Вот пример —

Live Demo

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

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

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

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

Вот пример —

Live Demo

<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 изображения используется для установки ширины изображения. Это свойство может иметь значение в длине или в%. Присваивая значение в%, оно применяет его в отношении поля, в котором доступно изображение.

Вот пример —

Live Demo

<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. Чем ниже значение, тем элемент прозрачнее.

Вот пример —

Live Demo

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

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