freeCodeCamp

8.5 KiB

Raw Blame History

title	localeTitle
Background	Задний план

Background

Свойство background позволяет использовать изображения и цвета для создания фонов для ваших веб-страниц.

Background Color

Свойство background color позволяет вам выбрать цвет вашего элемента. Это может быть фон для всей страницы или фон одного раздела вашей страницы.

Элемент представляет собой часть HTML, такую как заголовок или абзац на веб-странице.

Вот пример установки цвета фона для веб-страницы на зеленый.

  body { 
    background-color: green; 
  }

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

  body { 
    background-color: blue; 
  } 
  h1 { 
    background–color: purple; 
  }

Цвет CSS можно определить тремя способами:

Допустимое имя цвета, такое как blue
Значение HEX, такое как #FFFFF (это шестнадцатеричное значение для белого).
Значение RGB, такое как rgb(76,175,80) (Это значение RGB для светло-зеленого.)

Фоновые изображения

Вы можете использовать свойство background image для установки изображения в качестве фона для элемента. Изображение повторяется по умолчанию, так что оно охватывает весь элемент.

body { 
  background-image: url("barn.jpg"); 
 }

Вы также можете связать фотографии или gif, которые вы найдете в Интернете, используя их ссылку (т. Е. Из изображений Google для поиска).

body { 
  background-image: url("https://mdn.mozillademos.org/files/11983/starsolid.gif"); 
 }

Фоновый рисунок - свойство повтора

Фоновое изображение повторяется как по вертикали (вверх и вниз), так и по горизонтали (по веб-странице) по умолчанию. Вы можете использовать свойство background-repeat для повторения изображения по вертикали или по горизонтали.

Вот пример, который повторяет изображение по вертикали.

body { 
  background-image: url("barn.jpg"); 
  background-repeat: repeat-y; 
 }

Вы можете повторить изображение по горизонтали, установив для свойства background-repeat значение «repeat-x».

body { 
  background-image: url("barn.jpg"); 
  background-repeat: repeat-x; 
 }

Вы также можете использовать свойство background-repeat, чтобы установить, что изображение не повторяется.

body { 
  background-image: url("barn.jpg"); 
  background-repeat: no-repeat; 
 }

Фоновое изображение - свойство позиции

Вы можете использовать свойство position, чтобы указать, где ваше изображение будет расположено на веб-странице.

body { 
  background-image: url("barn.jpg"); 
  background-repeat: no-repeat; 
  background-position: right top; 
 }

Фоновое изображение - фиксированное положение

Вы можете использовать свойство background-attachment для установки изображения в фиксированную позицию. Фиксированное положение делает его таким, чтобы изображение не прокручивалось вместе с остальной частью страницы.

body { 
  background-image: url("barn.jpg"); 
  background-repeat: no-repeat; 
  background-position: right top; 
  background-attachment: fixed; 
 }

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

Градиент - это переход между двумя или более цветами и может использоваться с помощью CSS, аналогичного фоновому изображению.

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

Редактор Colorzilla Gradient Editor - отличный инструмент для создания пользовательских градиентов и связанной с ним разметки css.

Фон - стенографическая собственность

Вы можете написать свойства фона в одной строке. Это называется сокращенной собственностью.

body { 
  background: url("barn.jpg") no-repeat right top; 
 }

Вы можете оставить свойства, которые вам не нужны при использовании сокращенного свойства, но свойства должны использоваться в определенном порядке. Заказ:

цвет
образ
повторение
прикрепление
позиция

Несколько фоновых изображений

Вы можете указать несколько фоновых изображений в одном свойстве фона.

body { 
  background: url("barn.jpg"), url("stars.jpg"), linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)); 
 }

Первое заданное изображение (или градиент) больше всего на вершине, второе - после и так далее. Если один из элементов не является правильным из-за его URL-адреса или его синтаксиса, вся строка будет игнорироваться браузером.

Некоторые базовые свойства фона CSS

Свойства фона CSS используются для определения фоновых эффектов для элементов.

Свойства фона CSS: фоновый цвет изображение на заднем плане фон-повторить фон-вложение фон положение

Вы можете обратиться к следующей ссылке в школах W3, чтобы узнать больше о фоновых и связанных с ними материалах в CSS. Фоновая ссылка на W3

8.5 KiB Raw Blame History Unescape Escape