Расписание курсов

Дополнительные руководства по CSS

• Дополнительная литература по CSS
• Введение в CSS
• Основные синтаксисы CSS
• Продвинутые синтаксисы CSS
• Производные селекторы CSS
• Селекторы id CSS
• Селекторы класса CSS
• Создание CSS
• Фон CSS
• Текст CSS
• Шрифты CSS
• Списки CSS

Модели рамок CSS

• Обзор модели блока CSS
• Внутренние отступы CSS
• Границы CSS
• Внешние отступы CSS
• Слияние внешних отступов CSS

Позиционирование CSS

• Обзор позиционирования CSS
• Относительное позиционирование CSS
• Абсолютное позиционирование CSS
• Флоат CSS

Выборщики CSS

• Селекторы элементов CSS
• Группировка селекторов CSS
• Подробное описание селекторов класса CSS
• Подробное описание селекторов id CSS
• Подробное описание селекторов атрибута CSS
• Селекторы потомков CSS
• Селекторы дочерних элементов CSS
• Селекторы相邻них братьев CSS

Дополнительные курсы

Рекомендации по курсам:

• CodeW3C.com Шкатулка

CSS позволяет применять чистые цвета в качестве фона, а также использовать фоновые изображения для создания довольно сложных эффектов.

В этом вопросе возможности CSS значительно превосходят HTML.

цвет фона

можно использовать Атрибут background-colorУстановить цвет фона для элемента. Этот параметр принимает любые допустимые значения цвета.

Это правило устанавливает цвет фона элемента в灰色:

p {background-color: gray;}

Если вы хотите, чтобы цвет фона был немного расширен за пределы текста элемента, добавьте немного отступа внутри:

p {background-color: gray; padding: 20px;}

Попробуйте сами

Цвет фона можно установить для всех элементов, включая body и даже для внутрисимвольных элементов, таких как em и a.

параметр background-color не наследуется, его значение по умолчанию — transparent. Transparent означает «прозрачный». Это означает, что если у элемента не указан цвет фона, то фоновый слой будет прозрачным, чтобы фоновый слой его предка был видим.

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

Чтобы добавить изображение на фоновый слой, нужно использовать Свойство background-image.Значением по умолчанию для свойства background-image является none, что означает, что на фоне не размещено ни одного изображения.

Если нужно установить фоновое изображение, необходимо установить значение URL для этого свойства:

body {background-image: url(/i/eg_bg_04.gif);}

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

В следующем примере фоновое изображение применяется к абзацу, но не к другим частям документа:

p.flower {background-image: url(/i/eg_bg_03.gif);}

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

a.radio {background-image: url(/i/eg_bg_07.gif);}

Попробуйте сами

Теоретически, можно даже применить изображение фона к заменяющим элементам, таким как textareas и select, но не все агенты пользователей могут хорошо обрабатывать这种情况.

Кроме того, следует отметить, что background-image не может наследоваться. На самом деле, все свойства фона не могут наследоваться.

Фоновое повторение

Если нужно тянуть фоновое изображение на странице, можно использовать Свойство background-repeat.

Значение attribute repeat приводит к тому, что изображение тянется в горизонтальном и вертикальном направлениях, как это обычно делается с фоновыми изображениями. repeat-x и repeat-y приводят к тому, что изображение повторяется только в горизонтальном и вертикальном направлении соответственно, no-repeat не позволяет изображению повторяться в любом направлении.

По умолчанию, фоновое изображение начинается с верхнего левого угла элемента. Вот пример:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

Попробуйте сами

Фоновая локализация

Можно использовать Свойство background-positionИзменение положения изображения в фоновом изображении.

Ниже приведен пример, в котором фоновое изображение в элементе body размещается по центру:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

Существует множество методов для предоставления значений свойства background-position. Сначала, можно использовать некоторые ключевые слова: top, bottom, left, right и center. Обычно, эти ключевые слова появляются парами, но это не всегда так. Также можно использовать значения длины, такие как 100px или 5cm, и, наконец, можно использовать проценты. Разные типы значений несколько отличаются в размещении фонового изображения.

Ключевые слова

Ключевые слова для размещения изображения最容易 понять, их действие соответствует их названию. Например, top right размещает изображение в правом верхнем углу области отступа элемента.

Согласно спецификации, ключевые слова позиции могут появляться в любом порядке, при условии, что не более двух ключевых слов - одно для горизонтального направления, другое для вертикального.

Если появляется только один ключевой слово, то другой ключевой слово считается center.

Таким образом, если вы хотите, чтобы в центре верхней части каждого абзаца出现过 изображение, вам нужно声明 следующим образом:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

Ниже приведены эквивалентные ключевые слова позиции:

Процентные значения

Поведение процентных значений более сложное. Предположим, вы хотите использовать процентные значения для центрирования изображения в элементе, это легко:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

Это приводит к правильному размещению изображения, его центр выравнивается с центром элемента.Иначе говоря, процентные значения применяются как к элементу, так и к изображению.Иначе говоря, точка, описанная как 50% 50% в изображении (центр), выравнивается с точкой, описанной как 50% 50% в элементе (центр).

Если изображение находится в 0% 0%, его верхний левый угол будет находиться в левом верхнем углу области отступа элемента. Если положение изображения составляет 100% 100%, правый нижний угол изображения будет находиться в правом нижнем углу右边са.

Таким образом, если вы хотите поместить изображение в горизонтальном направлении в 2/3 и в вертикальном направлении в 1/3, вы можете声明 следующим образом:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

Если предоставляется только процентное значение, это значение используется в качестве горизонтального значения, а вертикальное значение предполагается равным 50%. Это аналогично ключевым словам.

Значением по умолчанию для background-position является 0% 0%, что эквивалентно top left. Это объясняет, почему фоновое изображение всегда начинается с левого верхнего угла области отступа элемента, если только вы не установили другое значение позиции.

Значения длины

Значения длины объясняют смещение от верхнего левого угла отступа элемента. Смещение点是 верхний левый угол изображения.

Например, если установить значение 50px 100px, верхний левый угол изображения будет находиться в левом верхнем углу отступа элемента вправо на 50 пикселей и вниз на 100 пикселей:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

Обратите внимание, что это differs от процента, потому что смещение всего лишь от одного верхнего левого угла к другому. То есть, верхний левый угол изображения выравнивается с указанной точкой в объявлении background-position.

Связь фона

Если документ较长, то при скролле документа вниз фоновое изображение также будет скручиваться. Когда документ скролится за пределы изображения, изображение исчезнет.

Вы можете использовать Атрибут background-attachmentПредотвратить это скольжение. Через этот атрибут можно объявить, что изображение относительно видимой области фиксировано (fixed), поэтому оно не будет скручиваться:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

Попробуйте сами

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

Свойства фона CSS

Инструменты

Референсное руководство по CSS

Примеры CSS

Тесты CSS

Уроки CSS

Ссылки спонсоров