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

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>


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




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok