Узнайте, как стиль изображения с помощью CSS.
Округлые изображения
Используйте border-radius свойство создавать закругленные изображения:
Миниатюра изображения
Используйте border собственности для создания миниатюр изображений.
Миниатюрное изображение:
пример
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
< img src="paris.jpg"
alt="Paris" > Попробуй сам " Изображение эскизов, как Ссылка:
пример
a {
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" >
< img src="paris.jpg" alt="Paris" >
< /a > Попробуй сам " Адаптивные изображения
Адаптивные изображения будет автоматически подстраиваться под размер экрана.
Изменение размера окна браузера, чтобы увидеть эффект:
Если вы хотите, чтобы изображение не сворачивать, если он должен, но никогда не масштабироваться до быть больше своего первоначального размера, добавьте следующие строки:
Совет: Подробнее о Отзывчивый веб - дизайн в нашем CSS RWD Учебник .
Текст изображения
Как позиционировать текст на изображении:
пример
Попробуй сам:
Верхний левый » Верхний правый» Внизу слева » Внизу справа» По центру »Polaroid Изображения / Карты
Язык тролля в Хардангер, Норвегия
Северное сияние в Норвегии
пример
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;
} Попробуй сам " Графические фильтры
CSS filter свойство добавляет визуальные эффекты (например , размытие и насыщенности) к элементу.
Примечание: Свойство фильтра не поддерживается в Internet Explorer, EDGE 12, или Safari 5.1 и более ранних версий.
пример
Изменение цвета всех изображений в черно-белый (100% серый):
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}Совет: Перейти к нашему CSS фильтра Reference , чтобы узнать больше о 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 Учебник .
Изображение режимное (продвинутый)
Это пример, чтобы продемонстрировать, как CSS и JavaScript могут работать вместе.
Во-первых, использовать CSS, чтобы создать модальное окно (диалоговое окно), и скрыть его по умолчанию.
Затем использовать JavaScript, чтобы показать модальное окно и отобразить изображение внутри модального, когда пользователь нажимает на изображение:
пример
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it
inside the modal - use its "alt" text as a caption
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;
}
// Get the <span> element that closes the modal
var span =
document.getElementsByClassName("close")[0];
// When the user clicks
on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
} Попробуй сам "