CSS изображения
В этой главе мы покажем вам, как использовать CSS макета изображения.
Сопряжение фотографии
Миниатюры
Мы используем border собственности для создания эскизов.
примеров
границы: 1px твердый #ddd;
граница радиуса: 4px;
обивка: 5px;
}
<Img SRC = "paris.jpg" Alt = "Париж">
Попробуйте »
примеров
Дисплей: встроенный блок;
границы: 1px твердый #ddd;
граница радиуса: 4px;
обивка: 5px;
Переход: 0.3с;
}
а: зависать {
коробка-тень: 0 0 2px 1px RGBA
(0, 140, 186, 0,5);
}
<A HREF = "paris.jpg">
<Img SRC = "paris.jpg" Alt = "Париж">
</ A>
Попробуйте »
Отзывчивый изображение
Отзывчивый изображение будет автоматически приспосабливать разнообразие размеров экрана.
Например, вы можете изменить настройки своего браузера, чтобы увидеть размер эффекта:
Если вам нужна свобода масштабировать изображение, а изображение, чтобы увеличить размер не больше, чем максимальное значение оригинала, вы можете использовать следующий код:
Подсказка: Веб - контент может быть более адаптивный дизайн ссылка CSS Адаптивный дизайн учебники .
Текст Фото
Как найти текст изображения:
примеров
Попытка:
Верхний левый угол >> верхний правый угол » левый нижний угол» нижний правый угол >> центр >>Карта-изображение
примеров
ширина: 80%;
фон-цвет: белый;
коробка-тень: 0 4px 8px 0 RGBA (0, 0, 0, 0,2), 0 6px 20px 0 RGBA (0, 0, 0, 0.19);
}
IMG {ширина: 100%}
div.container {
выравнивания текста: центр;
обивка: 10px 20px;
}
Попробуйте »
Графические фильтры
CSS filter атрибутов , чтобы добавить элементы с визуальными эффектами (например: нечеткая и насыщение).
Примечание: Internet Explorer или Safari 5.1 (и более ранних версий) не поддерживает это свойство.
примеров
Измените все цвета в черно-белых снимков (100% серым цветом):
-webkit-фильтр: черно - белый (100% ); / * Chrome, Safari, Opera * /
Фильтр: черно - белый (100%);
}
Попробуйте »
Совет: Посетите CSS фильтр Справочное руководство для больше содержания.
Отзывчивый Галерея изображений
примеров
обивка: 0 6px;
плавать: слева;
ширина: 24,99999%;
}
@media только экран и (макс-ширина : 700px) {
.responsive {
ширина: 49,99999%;
Запас: 6px 0;
}
}
@media только экран и (макс-ширина : 500px) {
.responsive {
ширина: 100%;
}
}
Попробуйте »
Фотографии режимное (модальных)
Этот пример демонстрирует, как объединить вместе CSS и JavaScript для отображения изображения.
Во-первых, мы используем CSS, чтобы создать модальное окно (диалог), по умолчанию скрыт.
Затем мы используем JavaScript для отображения окна модальный, когда мы нажимаем, изображение будет отображаться в виде всплывающего окна:
примеров
переменная модальный = document.getElementById ( 'myModal' );
// Получить режим кадров изображения, альт атрибуты изображения , как описано в настоящем китайской поп - музыки
вар IMG = document.getElementById ( 'myImg' );
вар modalImg = document.getElementById ( "img01" );
вар CaptionText = document.getElementById ( "подпись" );
img.onclick = функция () {
modal.style.display = "блок";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Получить элемент <SPAN> , который закрывает модальное
вар диапазон = document.getElementsByClassName ( "закрыть" ) [0];
// Когда пользователь нажимает на <SPAN > (х), закрыть модальный
span.onclick = функция () {
не modal.style.display = "нет";
}
Попробуйте »