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

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>


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



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies).

You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok