Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON PHP КАК СДЕЛАТЬ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



CSS background сокращённое



Свойство background сокращённое

Чтобы сократить код в CSS, можно также определить все свойства фона в одном единственном свойстве, которое называется background.

Вместо написания:

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Вы можете использовать свойство стенографии background:

Использовать сокращенное свойство стенографии для определения фона в одном объявлении:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}
Попробуйте сами »

При использовании свойства сокращен порядок значений свойств:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Не имеет значения, если одно из значений свойства отсутствует, пока остальные находятся в этом порядке. Обратите внимание, что мы не используем свойство background-attachment в приведенных выше примерах, поскольку оно не имеет значения.



Практика: background

Упражнение: background

Установить цвет фона элемента <h1> на "светло-голубой".

<style>
h1 {
  : lightblue;
}
</style>

<body>
  <h1>Это заголовок</h1>
  <p>Это параграф</p>
  <p>Это еще один параграф.</p>
</body>


Все CSS свойства background

Свойство Описание
background Устанавливает все свойства фона в одном объявлении
background-attachment Устанавливает, является ли фоновое изображение фиксированным или прокручивается вместе с остальной частью страницы
background-clip Задает область рисования фона
background-color Задает цвет фона элемента
background-image Задает фоновое изображение для элемента
background-origin Задает, где расположено фоновое изображение(я).
background-position Задает начальное положение фонового изображения
background-repeat Задает способ повторения фонового изображения
background-size Задает размер фонового изображения(й)


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- © Copyright. Все права защищены. Schoolsw3 работает на SW3.CSS.