Содержание
Многие люди используют CSS для настройки текста, изменения шрифта, цвета, размера и многого другого. Но многие люди часто забывают, что вы можете использовать CSS и с изображениями.
Изменение самого изображения
CSS позволяет настроить способ отображения изображения на странице. Это может быть очень полезно для поддержания согласованности ваших страниц. Устанавливая стили для всех изображений, вы создаете стандартный вид для ваших изображений. Некоторые из вещей, которые вы можете сделать:
- Добавьте рамку или контур вокруг изображений
- Удалить цветную рамку вокруг связанных изображений
- Регулировка ширины и / или высоты изображений
- Добавить тень
- Повернуть изображение
- Измените стили, когда изображение находится над
Предоставление вашему изображению границы — отличное место для начала. Но вы должны рассмотреть не только границу — подумайте обо всем краю вашего изображения и отрегулируйте поля и отступы. Изображение с тонкой черной рамкой выглядит хорошо, но добавление некоторого отступа между рамкой и изображением может выглядеть еще лучше.
img {
граница: 1px сплошной черный;
обивка: 5px;
} Хорошая идея всегда связывать не декоративные изображения, когда это возможно. Но когда вы это сделаете, помните, что большинство браузеров добавляют цветную рамку вокруг изображения. Даже если вы используете приведенный выше код для изменения границы, ссылка переопределит это, если вы также не удалите или не измените границу ссылки. Для этого вы должны использовать дочернее правило CSS, чтобы удалить или изменить границу вокруг связанных изображений:
img {
граница: нет;
} Вы также можете использовать CSS, чтобы изменить или установить высоту и ширину ваших изображений. Хотя из-за скорости загрузки не рекомендуется использовать браузер для настройки размеров изображений, они значительно лучше меняют размеры изображений, чтобы они по-прежнему выглядели хорошо. А с помощью CSS вы можете установить для всех ваших изображений стандартную ширину или высоту или даже установить размеры относительно контейнера.
Помните, что когда вы изменяете размеры изображений, для достижения наилучших результатов вы должны изменять размер только одного измерения — высоты или ширины. Это гарантирует, что изображение сохраняет свое соотношение сторон, и поэтому не выглядит странно. Установите другое значение в
авто
или не указывайте браузеру, чтобы он сохранял соотношение сторон.
img {
ширина: 50%;
высота: авто;
} CSS3 предлагает решение этой проблемы с новыми свойствами
Объект посадки
а также
Объект-положение
. С помощью этих свойств вы сможете определить точную высоту и ширину изображения и то, как должен обрабатываться формат изображения. Это может создать эффект почтового ящика вокруг ваших изображений или обрезку, чтобы изображение соответствовало требуемому размеру.
Хотя CSS3
Объект посадки
а также
Объект-положение
свойства пока широко не поддерживаются, есть другие свойства CSS3, которые хорошо поддерживаются в большинстве современных браузеров, которые вы можете использовать для изменения ваших изображений. Такие вещи, как падающие тени, закругленные углы и преобразования для поворота, перекоса или перемещения изображений — все это работает сейчас в большинстве современных браузеров. Затем вы можете использовать CSS-переходы для изменения изображений при наведении курсора мыши, щелчке мышью или сразу после определенного периода времени.
Использование изображений в качестве фона
CSS позволяет легко создавать модные фоны с вашими изображениями. Вы можете добавить фон для всей страницы или просто для определенного элемента. Создать фоновое изображение на странице легко с помощью
фоновая картинка
свойство:
тело {
background-image: url (background.jpg);
} Изменить
тело
Селектор для определенного элемента на странице, чтобы поместить фон только на один элемент.
Еще одна забавная вещь, которую вы можете сделать с изображениями, — это создать фоновое изображение, которое не прокручивается с остальной частью страницы — как водяные знаки. Вы просто используете стиль
background-attachment: исправлено;
вместе с вашим фоновым изображением. Другие варианты для ваших фонов включают в себя их расположение по горизонтали или вертикали, используя
фон-повторить
свойство. Написать
background-repeat: repeat-x;
мозаичное изображение по горизонтали и
background-repeat: repeat-y;
укладывать плитку вертикально И вы можете расположить фоновое изображение с помощью
фон положение
свойство.
И CSS3 добавляет больше стилей для ваших фонов. Вы можете растянуть свои изображения, чтобы соответствовать любому размеру фона или установить фоновое изображение в соответствии с размером окна. Вы можете изменить положение и затем обрезать фоновое изображение. Но одна из лучших особенностей CSS3 заключается в том, что теперь вы можете накладывать несколько фоновых изображений для создания еще более сложных эффектов.
HTML5 помогает стилю изображения
РИСУНОК
Элемент в HTML5 должен быть размещен вокруг любых изображений, которые могут находиться в документе отдельно. Один из способов думать об этом — если изображение может появиться в приложении, то оно должно быть внутри
РИСУНОК
элемент. Затем вы можете использовать этот элемент и
FIGCAPTION
элемент для добавления стилей к вашим изображениям.
