CSS - это аббревиатура от Cascading Style Sheets. Это простой, но мощный язык дизайна, способный преобразовывать веб-страницы. Проще говоря, он упрощает процесс создания презентабельных и привлекательных для пользователей веб-страниц с помощью . В этой статье мы поймем, как реализовать различные фоновые изображения в CSS в следующем порядке:
- Фоновое изображение в свойствах CSS
- Фоновое изображение в CSS
- Повтор фона
- Вложение фона
- Положение фона
- Фоновое изображение в размере CSS
- Фоновый цвет
Фоновое изображение в свойствах CSS
Есть много свойств, которые используются для управления поведением и позиционированием изображения. Эти свойства:
- фоновая картинка
- фон-повтор
- фоновое приложение
- фоновая позиция
- размер фона
- фоновый цвет
Мы познакомимся с каждым из этих свойств и посмотрим, когда и как их использовать, с некоторыми интересными демонстрациями.
Фоновое изображение в CSS
В фоновая картинка Свойство, как следует из названия, просто используется для обозначения и установки фонового изображения через элемент на веб-странице. По умолчанию фоновое изображение размещается в верхнем левом углу элемента.
синтаксис: фоновое изображение: url | none | linear-gradient | radial-gradient
тело {background-image: url ('apple.jpg')}фон с использованием URL
Давайте разберемся с параметрами:
- URL: Входные данные этого параметра позволяют нам указать либо путь к файлу к любому изображению, либо URL-адрес изображения, которое необходимо установить в качестве фона. Чтобы объявить более одного изображения, URL-адреса разделяются запятыми.
тело {background-image: url ('apple.jpg')} 
- никто: Это значение свойства по умолчанию, и если задано его значение, фоновое изображение не отображается.
тело {фон: нет}- линейный градиент (): Для фонового изображения установлен линейный градиент. Для этого свойства необходимо указать как минимум два цвета, то есть сверху вниз.
body {background-color: # 001 background-image: linear-gradient (белый 15%, прозрачный 16%), linear-gradient (белый 15%, прозрачный 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}- радиальный градиент (): Для фонового изображения задан радиальный градиент. Для этого свойства необходимо указать как минимум два цвета, т. Е. От центра до краев.
body {background-color: # 001 background-image: radial-gradient (белый 15%, прозрачный 16%), radial-gradient (белый 15%, прозрачный 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}- повторяющийся линейный градиент (): Повторяет линейный градиент. Давайте использовать тот же пример, который мы видели выше в линейном градиенте для повторяющегося линейного градиента, и увидим разницу.
body {background-color: # 001 background-image: repeat-linear-gradient (белый 15%, прозрачный 16%), повторяющийся линейный градиент (белый 15%, прозрачный 16%) background-size: 60px 60px background-position : 0 0, 30px 30px}- повторяющийся радиальный градиент (): Он повторяет радиальный градиент. Давайте рассмотрим тот же пример, который мы использовали выше в радиальном градиенте.
body {background-color: # 001 background-image: repeat-radial-gradient (белый 15%, прозрачный 16%), повторяющийся радиальный градиент (белый 15%, прозрачный 16%) background-size: 60px 60px background-position : 0 0, 30px 30px}Резервный фон
В качестве профессионального совета всегда рекомендуется добавлять цвет фона в качестве запасного варианта. Это приходит на помощь, особенно когда фоновые изображения не загружаются или градиентный фон, который мы установили при разработке, не поддерживается некоторыми старыми браузерами, в которых он просматривается.
Это не портит пользовательский опыт и может быть заявлено так:
как обрабатывать всплывающие окна в selenium webdriver
тело {background: url (apple_lost.jpg) розовый}Множественный фон
У нас также есть возможность установить несколько фоновых изображений, и это требуется в большинстве случаев, например, как изображение переднего плана и фоновое изображение. Здесь важен порядок изображений, изображение, которое должно быть впереди, объявляется первым, а изображение, которое должно быть позади, объявляется последним.
Ниже приведен пример нескольких фоновых изображений:
body {background-image: url ('small-heart.jpg'), url ('background.jpg')}Повтор фона
Свойство background-repeat используется вместе с background-image для определения поведения повторения изображения. Он определяет, будет ли и как будет повторяться фоновое изображение. Фоновое изображение по умолчанию повторяется как по вертикали, так и по горизонтали.
Возможные значения:
как выйти в Java
- Repeat - изображение повторяется как по горизонтали, так и по вертикали.
- no-repeat - изображение не повторяется
- repeat-x - изображение повторяется по горизонтали
- repeat-y - изображение повторяется по вертикали
- пробел - изображение повторяется с равными промежутками или промежутками между ними.
- круглый - изображение повторяется, чтобы заполнить область без промежутков между ними.
Синтаксис CSS для свойства background-repeat:
фон-повтор: повтор | повтор-х | повтор-у | без повторения | пробел | раунд
body {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}Вложение фона
В фоновое приложение Свойство используется вместе с background-image, чтобы указать, должно ли изображение прокручиваться при прокрутке содержимого. Это означает, что фоновое изображение должно быть исправлено или должно прокручиваться вместе с документом относительно вида окна браузера. Значение по умолчанию - прокрутка.
Возможные значения:
- scroll - изображение прокручивается вместе со страницей.
- исправлено - изображение не будет прокручиваться вместе со страницей
Синтаксис CSS для прикрепления фона:
фоновое вложение: прокрутка | исправлено
body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}Положение фона
В фоновая позиция Свойство используется для обозначения расположения или расположения фонового изображения. Возможные значения:
- верх
- правильно
- дно
- осталось
- центр
- комбинация этих значений (например, слева вверху)
Синтаксис CSS для background-position:
фоновая позиция: сверху | справа | слева | снизу | по центру
body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: scroll}Фоновое изображение в размере CSS
Это свойство является одним из наиболее полезных, поскольку позволяет нам контролировать размер фонового изображения. Есть разные комбинации, которые мы можем использовать с этим свойством и соответственно получать результаты. Значение по умолчанию - авто.
Следующие значения могут использоваться с background-size:
- авто
- длина - высота и ширина изображения, например 20 пикселей 40 пикселей.
- процент - высота и ширина изображения в процентах относительно родительского элемента, например 50% 50%.
- center- Выровняйте изображение по центру
- cover, масштабируя изображение так, чтобы оно полностью покрыло фоновую область.
- содержать, масштабируя изображение по размеру до его фактической высоты и ширины.
Синтаксис CSS для background-position:
размер фона: ценность
body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: 400px 150px, cover}body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: contain, 400px 150px}типы данных в mysql с примерами
Фоновый цвет
Применяется простейшее из всех свойств CSS. Он применяет сплошные цвета к фону страницы. Значение этого свойства может быть указано в цветах (например, красном, синем и т. Д.), Шестнадцатеричном значении и значении RGB.
Синтаксис CSS для background-color:
фоновый цвет: ценность
тело {background-image: url (small-heart.jpg) background-color: # 22a8e3}На этом мы завершаем все свойства, которые мы можем использовать с фоном. Мы всегда можем попробовать различные комбинации свойств, как мы видели в нашей демонстрации.
CSS имеет важное значение и должен приобретать навыки для каждого веб-разработчика интерфейса. Это помогает при разработке и стилизации фона, а также при создании впечатляющих веб-сайтов и обогащении пользовательского опыта. Лучше всего продолжать экспериментировать и в полной мере использовать эту особую интерфейсную технологию, поскольку она может творить чудеса и динамически преобразовывать страницу.
Ознакомьтесь с нашими который включает в себя живое обучение под руководством инструктора и реальный проектный опыт. Это обучение поможет вам овладеть навыками работы с серверными и интерфейсными веб-технологиями. Он включает обучение веб-разработке, jQuery, Angular, NodeJS, ExpressJS и MongoDB.
Есть вопрос к нам? Пожалуйста, укажите это в разделе комментариев блога «Фоновое изображение в CSS», и мы свяжемся с вами.