CSS-изображения
В этой главе рассказывается, как использовать CSS для размещения изображений.
Скругленные изображения
Миниатюры
Мы используемborderАтрибуты для создания миниатюр.
Пример
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
<img src="paris.jpg.html" alt="Paris">
Попробуйте сами »
Пример
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0 0 2px 1px rgba
(0, 140, 186, 0.5);
}
<a href="paris.jpg.html">
<img src="paris.jpg.html" alt="Paris">
</a>
Попробуйте сами »
Адаптивные изображения
Адаптивные изображения автоматически подстраиваются под экраны различных размеров.
В примере можно изменить размер окна браузера, чтобы увидеть эффект:
Если вам нужно свободно масштабировать изображения, и увеличенный размер изображения не превышает его исходное максимальное значение, можно использовать следующий код:
Совет:Для получения дополнительных материалов по адаптивному веб-дизайну вы можете обратиться кУчебник по адаптивному дизайну CSS。
Текст на изображении
Как расположить текст на изображении:
Пример
Попробуйте:
Верхний левый угол » Верхний правый угол » Нижний левый угол » Нижний правый угол » Центр »Изображение в стиле карточки
Пример
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;
}
Попробуйте сами »
Фильтры изображений
CSS filterАтрибут используется для добавления визуальных эффектов к элементам (например, размытие и насыщенность).
Примечание: Internet Explorer Или Safari 5.1 (и более ранние версии)Этот атрибут не поддерживается.
Пример
Измените цвет всех изображений на черно-белый (100% оттенков серого):
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
Попробуйте сами »
Совет:ПосетитеСправочное руководство по CSS-фильтрамПросмотреть больше содержимого.
Адаптивная галерея изображений
Пример
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%;
}
}
Попробуйте сами »
Модальное окно изображения
Этот пример демонстрирует, как объединить CSS и JavaScript для совместного отображения изображений.
Сначала мы используем CSS для создания модального окна (диалогового окна), которое по умолчанию скрыто.
Затем мы используем JavaScript, чтобы отобразить модальное окно. Когда мы нажимаем на изображение, изображение будет показано во всплывающем окне:
Пример
var modal = document.getElementById('myModal');
// Получить модальное окно изображения; атрибут alt используется как текстовое описание во всплывающем окне изображения
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Получить элемент <span>, который закрывает модальное окно
var span = document.getElementsByClassName("close")[0];
// Когда пользователь нажимает на <span> (x), закройте модальное окно
span.onclick = function() {
modal.style.display = "none";
}
Попробуйте сами »