CSS Styling Images - изображения
Узнайте, как стиль изображений с помощью CSS.
Округленные изображения
Используйте свойство border-radius для создания округленных изображений:
Пример
Округленное изображение:
img {
border-radius: 8px;
}
Пример
Обкружили изображение:
img {
border-radius: 50%;
}
Миниатюр
Используйте свойство border для создания миниатюр изображений.
Миниатюру:
Пример
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>
Адаптивные образы
Адаптивные изображения будут автоматически корректироваться в соответствии с размером экрана.
Измените размер окна обозревателя, чтобы увидеть эффект:
Если требуется, чтобы изображение было масштабировано, но никогда не масштабируется до размера, превышающего его исходный размер, добавьте следующее:
Пример
img {
max-width: 100%;
height:
auto;
}
Совет: Подробнее о адаптивном веб-дизайне читайте в нашем руководстве по CSS RWD.
Центрировать изображение
Чтобы центрировать изображение, установите левое и правое поле в auto и внесите его в block элемент:
Пример
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
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;
}
Прозрачное изображение
Свойство opacity может принимать значение от 0,0-1,0. Чем меньше значение, тем прозрачнее:
opacity 0.2
opacity 0.5
opacity 1
(default)
Примечание: IE8 и более раньше польза filter:alpha(opacity=x). X может принимать значение от 0-100. Более низкое значение делает элемент более прозрачным.
Пример
img {
opacity: 0.5;
filter:
alpha(opacity=50); /* For IE8 and earlier */
}
Текст изображения
Как разместить текст в изображении:
Пример
Try it Yourself:
Top Left » Top Right » Bottom Left » Bottom Right » Centered »Фильтры изображений
Свойство 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-фильтр , чтобы узнать больше о фильтрах CSS.
Наложение изображения при наведении
Создание эффекта наложения при наведении:
Пример
Исчезать в тексте:
Пример
Исчезать в коробке:
Пример
Слайд в (вверху):
Пример
Слайд в (снизу):
Пример
Слайд в (слева):
Пример
Слайд в (справа):
Отражение изображения
Наведите курсор мыши на изображение:
Пример
img:hover {
-webkit-transform: scaleX(-1);
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%;
}
}
Совет: Подробнее о адаптивном веб-дизайне читайте в нашем руководстве по 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;
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";
}