Многие используют CSS для настройки текста, изменения шрифта, цвета, размера и т. д. Но одна вещь, о которой многие люди часто забывают, - это то, что вы также можете использовать CSS с изображениями.
Изменение самого изображения
CSS позволяет настроить способ отображения изображения на странице. Это может быть действительно полезно для сохранения единообразия ваших страниц. Устанавливая стили для всех изображений, вы создаете стандартный вид для своих изображений. Что вы можете сделать:
- Добавьте границу или контур вокруг изображений
- Удалить цветную рамку вокруг связанных изображений
- Регулировка ширины и / или высоты изображений
- Добавить тень
- Повернуть изображение
- Измените стили когда изображение наведено
Создание рамки для вашего изображения - отличное место для начала. Но вы должны учитывать не только границу - подумайте обо всем крае вашего изображения и отрегулируйте поля и набивка также. Изображение с тонкой черной рамкой выглядит красиво, но добавление отступа между рамкой и изображением может выглядеть еще лучше.
Это хорошая идея всегда связывайте недекоративные изображения, когда возможно. Но когда вы это сделаете, помните, что большинство браузеров добавляют цветную рамку вокруг изображения. Даже если вы используете приведенный выше код для изменения границы, ссылка переопределит это, если вы также не удалите или не измените границу на ссылке. Для этого вы должны использовать дочернее правило CSS, чтобы удалить или изменить границу вокруг связанных изображений:
Вы также можете использовать CSS для изменения или установки высоты и ширины ваших изображений. Хотя использовать браузер для настройки размеров изображений - не лучшая идея из-за скорости загрузки, они становятся все лучше при изменении размеров изображений, чтобы они по-прежнему выглядели хорошо. А с помощью CSS вы можете установить для всех изображений стандартную ширину или высоту или даже установить размеры относительно контейнера.
Помните, что при изменении размера изображений для достижения наилучших результатов вы должны изменять размер только одного измерения - высоты или ширины. Это гарантирует, что изображение сохранит свое соотношение сторон и не будет выглядеть странно. Установите другое значение на авто или оставьте его, чтобы браузер оставил неизменным соотношение сторон.
CSS3 предлагает решение этой проблемы с новыми свойствами подходящий объект а также объект-позиция. С помощью этих свойств вы сможете определить точную высоту и ширину изображения, а также то, как следует обрабатывать соотношение сторон. Это может создать эффекты почтового ящика вокруг ваших изображений или обрезать, чтобы изображение соответствовало требуемому размеру.
Существуют и другие свойства CSS3, которые хорошо поддерживаются в большинстве браузеров, которые вы также можете использовать для изменения своих изображений. Такие вещи, как тени, закругленные углы и преобразования для поворота, наклона или перемещения ваших изображений, прямо сейчас работают в большинстве современных браузеров. Затем вы можете использовать переходы CSS, чтобы изображения изменялись при наведении курсора, щелчке мышью или сразу после определенного периода времени.
Использование изображений в качестве фона
CSS позволяет легко создавать причудливые фоны с вашими изображениями. Ты можешь добавить фон на всю страницу или только к конкретному элементу. Создать фоновое изображение на странице легко с помощью фоновая картинка имущество:
Изменить тело селектор к определенному элементу на странице, чтобы поместить фон только на один элемент.
Еще одна забавная вещь, которую вы можете сделать с изображениями, - это создать фоновое изображение, которое не прокручивается вместе с остальной частью страницы - например, водяной знак. Вы просто используете стиль background-attachment: исправлено; вместе с вашим фоновым изображением. Другие варианты для ваших фонов включают в себя их мозаику только по горизонтали или вертикали с помощью фон-повтор имущество. Писать фон-повтор: повтор-х; расположить изображение по горизонтали и фон-повтор: повтор-у; укладывать плитку вертикально. И вы можете разместить фоновое изображение с помощью background-position имущество.
CSS3 также добавляет больше стилей для вашего фона. Вы можете растянуть изображения, чтобы они соответствовали фону любого размера, или установить масштабирование фонового изображения с размером окна. Вы можете изменить положение, а затем вырезать фоновое изображение. Но одна из лучших особенностей CSS3 заключается в том, что теперь вы можете накладывать несколько фоновых изображений, чтобы создавать еще более сложные эффекты.
HTML5 помогает стилизовать изображения
В ФИГУРА Элемент в HTML5 следует размещать вокруг любых изображений, которые могут стоять отдельно в документе. Один из способов подумать об этом: если изображение может появиться в приложении, то оно должно быть внутри ФИГУРА элемент. Затем вы можете использовать этот элемент и ФИГУРКА элемент для добавления стилей к вашим изображениям.