CSS настройка стиля изображений

Узнайте, как использовать CSS для настройки стиля изображений.

Круглые изображения

используйте border-radius свойство создает круглые изображения:

Пример

Круглые изображения:

img {
  border-radius: 8px;
}

亲自试一试

Пример

Круглые изображения:

img {
  border-radius: 50%;
}

亲自试一试

изображение эскиза

используйте border свойство создает эскиз.

Эскиз:

Coffee

Пример

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
<img src="paris.jpg" alt="Paris">

亲自试一试

в качестве эскиза ссылки:

Пример

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

亲自试一试

Responsive изображения

Responsive изображения автоматически масштабируются под размер экрана.

Если вы хотите уменьшить изображение по мере необходимости, но хотите исключить его увеличение до размеров больше исходного, добавьте следующий код:

Пример

img {
  max-width: 100%;
  height: auto;
}

亲自试一试

提示：На нашем сайте CSSRWD教程 Узнайте больше о responsivном веб-дизайне на нашем сайте.

Центрировать изображение

Чтобы выровнять изображение по центру, установите левый и правый отступы в auto и установите его как блоковый элемент:

Coffee

Пример

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

亲自试一试

Фотографии Polaroid / Карты

Tulip

Жёлтые тюльпаны

Tulip

Красные тюльпаны

Пример

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
  text-align: center;
  padding: 10px 20px;
}

亲自试一试

Прозрачное изображение

opacity Значение атрибута варьируется от 0.0 до 1.0. Чем меньше значение, тем больше прозрачность:

Tulip

opacity 0.2

Tulip

opacity 0.5

Tulip

opacity 1 (по умолчанию)

Пример

img {
  opacity: 0.5;
}

亲自试一试

Текст в изображении

Как расположить текст в изображении:

Пример

CodeW3C.com Logo
В левом нижнем углу
В левом верхнем углу
В правом верхнем углу
В правом нижнем углу
Центрировано

Попробуйте сами:

В левом верхнем углу В правом верхнем углу В левом нижнем углу В правом нижнем углу Центрировано

Изображение фильтр

CSS filter Атрибут добавляет визуальные эффекты (например, размытие и насыщенность) к элементам.

Внимание:Microsoft Internet Explorer или Edge 12 не поддерживают атрибут filter.

Пример

Измените все изображения на черно-белые (100% серый):

img {
  filter: grayscale(100%);
}

亲自试一试

提示：Пожалуйста, посетите наш Руководство по CSS фильтрамДля получения дополнительной информации о CSS фильтрах.

Эффект叠加 при наведении мыши на изображение

Создайте эффект叠加 при наведении мыши:

Пример 1

Входящий текст:

Avatar
Hello World

亲自试一试

Пример 2

Входящий фрейм:

Avatar
Bill

亲自试一试

Пример 3

Вверх (внутренний):

Avatar
Hello World

亲自试一试

Пример 4

Вниз (внутренний):

Avatar
Hello World

亲自试一试

Пример 5

Влево (внутренний):

Avatar
Hello World

亲自试一试

Пример 6

Вправо (внутренний):

Avatar
Hello World

亲自试一试

Перевернуть изображение

Переместите мышь на изображение:

Спортивный парк

Пример

img:hover {
  transform: scaleX(-1);
}

亲自试一试

Адаптивная галерея изображений

Мы можем использовать CSS для создания адаптивной галереи изображений.

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

Пример

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}
@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

亲自试一试

提示：请在我们的 CSSRWD教程 中学习有关响应式Web设计的更多知识。

图像模态（Image Modal）

这是一个演示CSS和JavaScript如何协同工作的例子。

首先，请使用CSS创建模态窗口（对话框），并默认将其隐藏。

然后，当用户单击图像时，使用JavaScript显示模态窗口并在模态内部显示图像：

Зеленый газон

亲自试一试