Главная » Изучение

Учебное пособие по CSS: начало работы с фоном CSS

начало работы с фоном CSS Изучение
На чтение 16 мин Просмотров 72 Опубликовано

CSS — важный язык, который мы можем использовать для таких задач, как базовая стилизация текста документа, анимация и веб-разработка. Существует множество различных свойств CSS, которые мы можем использовать для управления и настройки наших веб-страниц. Фон CSS — одно из таких свойств. Мы можем использовать свойство фона CSS, чтобы установить цвета фона, изображения, размеры и многое другое. Сегодня мы собираемся обсудить это полезное свойство CSS и изучить все, что мы можем с ним делать.

Давайте начнем!

Содержание
  1. Что такое фон CSS?
  2. CSS фоновое изображение
  3. Фоновый цвет
  4. Размер фона
  5. Положение фона
  6. Повтор фона
  7. Вложение фона
  8. Фоновый градиент
  9. Линейные градиенты
  10. Радиальные градиенты
  11. Подведение итогов и следующие шаги

Что такое фон CSS?

Фон CSS — это сокращенное свойство CSS. Мы можем использовать сокращенные свойства для одновременной установки значений нескольких свойств CSS. Это означает, что мы можем писать читаемый код быстрее и эффективнее. Мы можем использовать свойства фона для управления фоном элемента.

Фон CSS позволяет нам управлять многими свойствами фона, такими как:

  • Color
  • Size
  • Position
  • Repeat
  • Attachment
  • Gradient
  • Image
  • Opacity
  • И т.д.

Имеется обширная поддержка браузера для фона CSS. Поддерживается следующими браузерами:

  • Chrome
  • Edge
  • Firefox
  • Internet Explorer
  • Opera
  • Safari

CSS фоновое изображение

Мы можем использовать свойство background-image для установки фоновых изображений для различных элементов. Современные браузеры поддерживают различные типы файлов изображений, такие как JPG, PNG, IMG, GIF и SVG. Мы также можем установить запасной цвет, который будет отображаться в случае, если наше изображение не загружается или наш браузер не поддерживает наш тип файла изображения.

Чтобы установить фоновое изображение для страницы, мы можем использовать следующий код:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url(«https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80»);
}
</style>
</head>
<body>
<h1>CSS background image</h1>
<p>This is a beach background image!</p>
</body>
</html>

По умолчанию изображение повторяется и покрывает весь элемент. Мы также можем использовать несколько фоновых изображений, если захотим. Это требует немного больше работы, потому что нам нужно установить больше значений, чтобы убедиться, что все находится там, где мы хотим.

Читайте также:  Насколько программисту нужно знать математику?

Нам также необходимо убедиться, что мы кодируем изображения в точном порядке, в котором мы хотим, чтобы они появлялись, что означает, что изображение, которое мы хотим спереди, должно быть первым, а изображение, которое мы хотим, должно быть последним. Код выглядит так же, как и для одиночного фонового изображения, но имена файлов изображений разделяются запятыми.

Если мы хотим установить резервный цвет, мы можем использовать следующий код:

<!DOCTYPE html>
<html>
<head>
<style>
 body {
  background: url(sampleimage.jpg) blue;
}
</style>
</head>
<body>
</body>
</html>

Фоновый цвет

Свойство background-color позволяет нам применять сплошные цвета в качестве фона к элементам. Существуют разные значения свойств, которые мы можем использовать для управления аспектами цвета фона. Эти значения включают:

  • цвет : это значение определяет цвет фона. Мы можем выбрать из списка значений цвета CSS, чтобы выбрать точные цвета, которые мы хотим использовать.
  • непрозрачность : это значение определяет непрозрачность элемента.
  • прозрачный : это значение указывает, что цвет фона прозрачный.
  • initial : для свойства будет установлено значение по умолчанию.
  • наследовать : свойство будет унаследовано от родительского элемента.
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: green;
}
</style>
</head>
<body>
<h1>Background color</h1>
<p>This is a green background!</p>
</body>
</html>

Мы также можем установить разные цвета фона для разных элементов. Вот пример:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: yellow;
}
div {
  background-color: green;
}
p {
  background-color: red;
}
</style>
</head>
<body>
<h1>This is yellow!</h1>
<div>
This is green!
<p>This is red!</p>
This is green… again!
</div>
</body>
</html>

Мы также можем использовать число от 0,0 до 1,0, чтобы установить непрозрачность цвета фона. Чем меньше число, тем прозрачнее цвет. Давайте посмотрим на пример:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: red;
}
div.first {
  opacity: 0.1;
}
div.second {
  opacity: 0.3;
}
div.third {
  opacity: 0.6;
}
</style>
</head>
<body>
<h1>Background image opacity</h1>
<div class=»first»>
  <h1>0.1</h1>
</div>
<div class=»second»>
  <h1>0.3</h1>
</div>
<div class=»third»>
  <h1>0.6</h1>
</div>
<div>
  <h1>1.0</h1>
</div>
</body>
</html>

Размер фона

Свойство background-size позволяет нам указать размер фонового изображения.

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 2px solid black;
  padding: 25px;
  background: url(«https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80»);
  background-repeat: no-repeat;
  background-size: auto;
}
#example2 {
  border: 2px solid black;
  padding: 25px;
  background: url(«https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80»);
  background-repeat: no-repeat;
  background-size: 300px 100px;
}
</style>
</head>
<body>
<h2>background-size: auto (default):</h2>
<div id=»example1″>
  <h2>Background size</h2>
  <p>Here’s the beach background image in its original size!</p>
</div>
<h2>background-size: 300px 100px:</h2>
<div id=»example2″>
  <h2>Background size</h2>
  <p>Here’s the beach background image set to 300px wide and 100px high!</p>
</div>
</body>
</html>

Положение фона

Свойство background-position позволяет нам указать начальную позицию фонового изображения. По умолчанию фоновые изображения размещаются в верхнем левом углу элемента. Это свойство имеет разные значения свойств, которые позволяют нам контролировать расположение фоновых изображений. Эти значения включают:

  • слева вверху : фоновое изображение начинается слева вверху.
  • слева внизу : фоновое изображение начинается слева внизу.
  • левый центр : фоновое изображение начинается с левого центра.
  • справа вверху : фоновое изображение начинается справа вверху.
  • справа внизу : фоновое изображение начинается справа внизу.
  • справа по центру : фоновое изображение начинается с правого центра.
  • по центру вверху : фоновое изображение будет начинаться по центру вверху.
  • по центру внизу : фоновое изображение будет начинаться по центру внизу.
  • center center: Фоновое изображение начнется в центре по центру.
  • x% y%: xзначение — это горизонтальное положение, а yзначение — вертикальное положение. Левый верхний угол 0% 0%и правый нижний угол 100% 100%.
  • xpos ypos: xposзначение — это горизонтальное положение, а yposзначение — вертикальное положение. Левый верхний угол — это значение 0 0.
  • initial: для свойства будет установлено значение по умолчанию.
  • наследовать: свойство будет унаследовано от родительского элемента.
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url(«https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80»);
  background-size: 300px 100px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
}
</style>
</head>
<body>
<h1>Background position</h1>
<p>Here’s the beach background image in the center of the page!</p>
</body>
</html>

Повтор фона

Свойство background-repeat позволяет нам указать, повторяются ли и как фоновые изображения. По умолчанию фоновые изображения повторяются по вертикали и горизонтали. Это свойство имеет множество различных значений свойств, которые позволяют нам контролировать представление фоновых изображений. Давайте посмотрим на значения и на то, что они делают:

  • повтор : фоновое изображение повторяется по вертикали и горизонтали. Окончательное изображение будет обрезано, если оно не подходит.
  • repeat-x : фоновое изображение повторяется по горизонтали.
  • repeat-y : фоновое изображение повторяется по вертикали.
  • no-repeat : фоновое изображение не будет повторяться (будет показано только один раз).
  • пробел: фоновое изображение будет повторяться в максимально возможной степени без обрезки. Первое и последнее изображения помещаются в начало и конец элемента, а пробелы равномерно распределяются между повторяющимися изображениями.
  • round: фоновое изображение будет повторяться и обрабатываться, чтобы полностью заполнить пространство (без пробелов между ними).
  • initial: для свойства будет установлено значение по умолчанию.
  • наследовать: свойство будет унаследовано от родительского элемента.
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url(«https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80»);
  background-size: 300px 100px;
  background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Background repeat</h1>
<p>This is the repeat-y value!</p>
</body>
</html>

Вложение фона

Мы можем использовать свойство background-attachment, чтобы указать, хотим ли мы, чтобы наши фоновые изображения были фиксированными, или мы хотим, чтобы они перемещались вместе с остальной частью страницы при прокрутке. Это свойство имеет разные значения свойств, которые позволяют нам управлять тем, как мы прикрепляем фоновые изображения. Эти значения включают:

  • исправлено : фоновое изображение не прокручивается вместе со страницей.
  • local : фоновое изображение прокручивается вместе с содержимым элемента.
  • scroll : фоновое изображение прокручивается вместе со страницей.
  • initial : для свойства будет установлено значение по умолчанию.
  • наследовать : свойство будет унаследовано от родительского элемента.

Давайте посмотрим на пример fixedзначения:

<!DOCTYPE html>
<html>
<head>
<style>
body  {
  background-image: url(«https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80»);
  background-size: 300px 100px;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Background attachment</h1>
<p>The image is fixed. Scroll to see!</p>
<p>The image is fixed. Scroll to see!</p>
<p>The image is fixed. Scroll to see!</p>
<p>The image is fixed. Scroll to see!</p>
<p>The image is fixed. Scroll to see!</p>
<p>The image is fixed. Scroll to see!</p>
<p>The image is fixed. Scroll to see!</p>
<p>The image is fixed. Scroll to see!</p>
<p>The image is fixed. Scroll to see!</p>
<p>The image is fixed. Scroll to see!</p>
<p>The image is fixed. Scroll to see!</p>
<p>The image is fixed. Scroll to see!</p>
<p>The image is fixed. Scroll to see!</p>
<p>The image is fixed. Scroll to see!</p>
<p>The image is fixed. Scroll to see!</p>
<p>The image is fixed. Scroll to see!</p>
</body>
</html>

Теперь давайте посмотрим на пример scrollзначения. Это заставит изображение прокручиваться вместе со страницей.

<!DOCTYPE html>
<html>
<head>
<style>
body  {
  background-image: url(«https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80»);
  background-size: 300px 100px;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
</style>
</head>
<body>
<h1>Background attachment</h1>
<p>The image moves with the page. Scroll to see!</p>
<p>The image moves with the page. Scroll to see!</p>
<p>The image moves with the page. Scroll to see!</p>
<p>The image moves with the page. Scroll to see!</p>
<p>The image moves with the page. Scroll to see!</p>
<p>The image moves with the page. Scroll to see!</p>
<p>The image moves with the page. Scroll to see!</p>
<p>The image moves with the page. Scroll to see!</p>
<p>The image moves with the page. Scroll to see!</p>
<p>The image moves with the page. Scroll to see!</p>
<p>The image moves with the page. Scroll to see!</p>
<p>The image moves with the page. Scroll to see!</p>
<p>The image moves with the page. Scroll to see!</p>
<p>The image moves with the page. Scroll to see!</p>
<p>The image moves with the page. Scroll to see!</p>
<p>The image moves with the page. Scroll to see!</p>
</body>
</html>

Фоновый градиент

Свойства градиента фона CSS позволяют нам создавать эффект градиента между двумя или более цветами. Градиенты поддерживают прозрачность, поэтому мы можем создавать эффекты затухания с помощью нашего градиента. Есть два типа градиентов: линейные градиенты и радиальные градиенты.

Линейные градиенты

С помощью свойства linear-gradient мы можем создавать линейные градиенты, которые идут сверху вниз, слева направо и по диагонали. Мы должны определить по крайней мере две цветовые точки, которые мы хотим передать вместе. Мы можем определить несколько цветовых точек и повторять градиенты, если захотим.

Давайте посмотрим на базовый линейный градиент, который идет сверху вниз с двумя цветами:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: green; /* For browsers that do not support gradients */
  background-image: linear-gradient(green, blue);
}
</style>
</head>
<body>
<h1>Linear gradient</h1>
<p>This linear gradient starts with green at the top and transitions to blue at the bottom!</p>
<div id=»grad1″></div>
</body>
</html>

Теперь давайте посмотрим на вертикальный линейный градиент, который имеет несколько цветов и создает радугу:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 55px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>
<div id=»grad1″ style=»text-align:center;margin:auto;color:black;font-size:40px;font-weight:bold»>
Vertical linear gradient!
</div>
</body>
</html>

Радиальные градиенты

С помощью свойства radial-gradient мы можем создать градиент, определяемый его центром. Форма радиальных градиентов по умолчанию — эллипс, но его можно изменить на круг. Мы должны определить как минимум две точки цвета с радиальными градиентами, но мы можем определить несколько, если захотим. Подобно линейным градиентам, мы также можем повторять радиальные градиенты.

Давайте посмотрим на базовый радиальный градиент с тремя цветами:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: green; /* For browsers that do not support gradients */
  background-image: radial-gradient(green, blue, purple);
}
</style>
</head>
<body>
<h1>Radial gradient!</h1>
<div id=»grad1″></div>
</body>
</html>

Теперь давайте посмотрим на повторяющийся радиальный градиент:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: green; /* For browsers that do not support gradients */
  background-image: repeating-radial-gradient(green, blue 10%, purple 15%);
}
</style>
</head>
<body>
<h1>Repeating radial gradient!</h1>
<div id=»grad1″></div>
</body>
</html>

Подведение итогов и следующие шаги

Поздравляем, вы сделали первые шаги с фоном CSS! Есть много разных способов, которыми мы можем управлять нашими веб-страницами, используя различные свойства, которые мы исследовали сегодня. CSS — важная часть интерфейсной веб-разработки. Еще многое предстоит узнать о файлах CSS. Вот некоторые рекомендуемые темы для следующего рассмотрения:

  • Flexbox
  • Селекторы CSS
  • Встроенные и блочные элементы
  • HTML-шаблоны и HTML-элементы
Оцените статью
bestprogrammer.ru
Добавить комментарий

© 2024 bestprogrammer.ru
Этот сайт использует cookie для хранения данных. Продолжая использовать сайт, Вы даете свое согласие на работу с этими файлами.