Создание и стилизация изображений с помощью CSS

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

Примеры кода:

1. Изменение размера изображения:

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

В данном примере все теги img на веб-странице будут иметь ширину 200 пикселей, а высота будет автоматически подстраиваться пропорционально.

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

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

Этот код задает в качестве фона для элемента изображение background.jpg, при этом изображение не будет повторяться, и его размер будет подстроен так, чтобы полностью заполнить заданный контейнер.

3. Добавление обводки к изображению:

css
img {
  border: 2px solid red;
}

Данный код добавит тонкую красную обводку толщиной 2 пикселя ко всем изображениям на веб-странице.

4. Применение тени к изображению:

css
img {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

Этот код добавляет тень со следующими параметрами к изображениям: смещение по горизонтали — 2 пикселя, смещение по вертикали — 2 пикселя, размытие тени — 5 пикселей, альфа-канал (прозрачность) — 0.5.

5. Круглое изображение:

css
img {
  border-radius: 50%;
}

В данном примере устанавливается радиус скругления равный 50% для всех изображений, благодаря чему они становятся круглыми.

Таким образом, CSS image позволяет разнообразить и настроить отображение изображений на веб-странице, делая их более привлекательными и соответствующими требованиям дизайна.