Image CSS: создание и стилизация изображений на сайте

CSS (Cascading Style Sheets) - это язык стилей, который используется для определения внешнего вида веб-сайта или веб-приложения. Он включает в себя различные свойства и значения, которые могут быть применены к HTML-элементам, включая изображения.

Свойства, связанные с изображениями в CSS, позволяют устанавливать различные аспекты их представления, такие как размер, позиционирование, цвет фона и текстовые эффекты. Рассмотрим несколько примеров кода, демонстрирующих использование различных свойств для стилизации изображений:

1. Установка размеров изображения:

css
img {
  width: 300px;
  height: 200px;
}

В данном примере установлены фиксированные ширина и высота для всех элементов , что позволит им занимать конкретное пространство на странице.

2. Установка изображения в качестве фона:

css
div {
  background-image: url("image.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

В этом случае изображение "image.jpg" устанавливается в качестве фона для элемента

css
img:hover {
  opacity: 0.8;
  filter: grayscale(50%);
}