Узнайте, как стилизовать изображения с помощью CSS3.
Закругленные изображения
Использовать свойство border-radius для создания скругленных изображений:
Миниатюрное изображение
Использовать свойство border для создания изображения.
Миниатюрное изображение:
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="paris.jpg" alt="Париж">
Попробуйте сами »
Миниатюра изображения как ссылка:
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="Париж">
</a>
Попробуйте сами »
Отзывчивое изображение
Адаптивные изображения будут автоматически подстраиваться под размер экрана.
Измените размер окна браузера, чтобы увидеть эффект:
Если вы хотите, чтобы изображение уменьшалось, но иногда масштабировалось, чтобы быть больше, чем его исходный размер, добавьте следующее:
img {
max-width: 100%;
height: auto;
}
Попробуйте сами »
Совет: Подробнее об адаптивном веб дизайне читайте в нашем CSS RWD Учебнике.
Центрировать изображение
Для центрирования изображения установите левое и правое поля в auto
и превратить его в элемент block:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
Попробуйте сами »
Изображение полароид / карта
Пять земли
Северное сияние
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. Чем меньше значение, тем прозрачнее:
непрозрачность 0.2
непрозрачность 0.5
непрозрачность 1
(по умолчанию)
Примечание: IE8 и более раннее использование filter:alpha(opacity=x).
X может принимать значение от 0 до 100. Меньшее значение делает элемент более прозрачным.
img {
opacity: 0.5;
filter: alpha(opacity=50); /* Для IE8 и более ранних версий */
}
Попробуйте сами »
Текст на изображении
Как расположить текст на изображении:
Попробуйте сами :
Верхний Левый » Верхний Правый » Нижний Левый » Нижний Правый » Центр »Фильтр изображения
Свойство CSS3 filter добавляет визуальные эффекты (например, размытие и насыщенность) к элементу.
Примечание: Свойство filter
не поддерживается в Internet Explorer, Edge 12 или Safari 5.1 и более ранних версиях.
Изменить цвет всех изображений на черно-белый (100 процентов серый):
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
Совет: Перейти к нашему CSS фильтр справочник чтобы узнать больше о фильтрах CSS.
Наложение при наведении курсора на изображение
Создание эффекта наложения при наведении:
Зеркальное изображение
Наведите курсор на изображение:
img:hover {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
Попробуйте сами »
Отзывчивая галерея изображений
CSS3 можно использовать для создания галереи изображений. Этот пример использования медиа запросы для переупорядочивания изображений на разных размерах экрана. Изменить размер окна браузера, чтобы увидеть эффект:
.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%;
}
}
Попробуйте сами »
Совет: Подробнее об адаптивном веб-дизайне читайте в нашем CSS RWD Учебник.
Изображение модальное (улучшенный)
Это пример того, как CSS и JavaScript могут работать вместе.
Во-первых, используйте CSS3, чтобы создать модальное окно (диалоговое окно) и скрыть его по умолчанию.
Затем используйте 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;
captionText.innerHTML = this.alt;
}
// Получить элемент <span>, который закрывает модальное
var span = document.getElementsByClassName("close")[0];
// Когда пользователь нажимает на <span> (x) закройте модальное
span.onclick = function() {
modal.style.display = "none";
}
Попробуйте сами »