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