Изображения играют важную роль на любой веб-странице. Хотя не рекомендуется включать много изображений, но все равно важно использовать хорошие изображения везде, где это необходимо.
CSS играет важную роль в управлении отображением изображения. Вы можете установить следующие свойства изображения с помощью CSS.
-
Свойство border используется для установки ширины границы изображения.
-
Свойство height используется для установки высоты изображения.
-
Свойство width используется для установки ширины изображения.
-
Свойство -moz-opacity используется для установки непрозрачности изображения.
Свойство border используется для установки ширины границы изображения.
Свойство height используется для установки высоты изображения.
Свойство width используется для установки ширины изображения.
Свойство -moz-opacity используется для установки непрозрачности изображения.
Свойство Граница изображения
Свойство 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>
Это даст следующий результат —
Свойство высоты изображения
Свойство высоты изображения используется для установки высоты изображения. Это свойство может иметь значение в длине или в%. Присваивая значение в%, оно применяет его в отношении поля, в котором доступно изображение.
Вот пример —
<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 использует 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>
Это даст следующий результат —