Фон блока css: Фон и границы — Изучение веб-разработки

27.04.2023 Facebook Twitter LinkedIn Google+ Разное

background | htmlbook.ru

CSSInternet ExplorerChromeOperaSafariFirefoxAndroidiOS
2.16.0+8.0+1.0+3.5+1.0+1.0+2.1+1.0+
39.0+1.0+10.5+1.3+3.6+2.1+1.0+

Краткая информация

Значение по умолчаниюtransparent || none || repeat || scroll || 0% 0%
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/colors.html#propdef-background

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Синтаксис

CSS2.1
background: [background-attachment || background-color || background-image 
  || background-position || background-repeat] | inherit
CSS3
background: [<фон>, ]* <последний_фон>

Здесь:

<фон> = [background-attachment || background-image || background-position || background-repeat] | inherit

<последний_фон> = [background-attachment || background-color || background-image || background-position || background-repeat] | inherit

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

Значения

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

Пример 1

XHTML 1.0CSS2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>background</title>
  <style type="text/css">
   div {
    height: 200px; /* Высота блока */
    width: 200px; /* Ширина блока */
    overflow: auto; /* Добавляем полосы прокрутки */
    padding-left: 15px; /* Отступ от текста слева */
    background: url(images/hand.png) repeat-y #fc0; /* Цвет фона, 
                                                    путь к фоновому изображению и 
                                                    повторение фона по вертикали */
   }
  </style>
 </head>
 <body>
  <div>
   Duis te feugifacilisi.
  Duis autem dolor in hendrerit in vulputate velit esse molestie 
   consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et 
   iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore
   te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion 
   ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te 
   feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан ниже (рис. 1).

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

Пример 2

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background</title>
  <style>
   body {
    background: url(images/hand.png) repeat-y, 
                #fc0 url(images/bg-right.png) repeat-y 100% 0;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Объектная модель

[window. ]document.getElementById(«elementID»).style.background

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Цвет и фон

позиция фона — учебник CSS

Свойство background-position позволяет указывать начальную позицию фонового рисунка сразу для двух осей — x и y. Впрочем, можно воспользоваться и отдельными свойствами для каждой оси — background-position-x и background-position-y.

Значения background-position

В качестве значений могут выступать как специальные ключевые слова, так и числовые значения в единицах измерения CSS — процентах, пикселях и т. д.

Ключевые слова для горизонтального позиционирования

  • left — фоновый рисунок прилеплен к левой стороне элемента;
  • center — фоновый рисунок расположен в центре оси x;
  • right — фоновый рисунок прилеплен к правой стороне элемента.

div {
	background-position-x: left;
}

Ключевые слова для вертикального позиционирования

  • top — фоновый рисунок прилеплен к верхней стороне элемента;
  • center — фоновый рисунок расположен в центре оси y;
  • bottom — фоновый рисунок прилеплен к нижней стороне элемента.

div {
	background-position-y: bottom;
}

Сокращенная запись для двух осей

Часто позиционирование фона задается сразу для двух осей. Для этого удобно пользоваться сокращенной записью, т. е. свойством background-position. Оно принимает одно либо два значения (для позиционирования сразу по двум осям либо по каждой отдельно соответственно).

Ниже — различные примеры позиционирования фона с помощью ключевых слов:


background-position: top center; /* фон вверху по центру */
background-position: top right; /* фон в верхнем правом углу */
background-position: bottom left; /* фон в левом нижнем углу */
background-position: center right; /* фон справа по центру */

Значения можно менять местами — они будут работать так же.

Примеры выравнивания фона с помощью background-position

Если вы установили повтор фона с помощью свойства background-repeat, то background-position будет определять, от какой точки будет начинаться дублирование изображения.

Для позиционирования фона можно использовать и одно значение для двух осей сразу:


background-position: center; /* фон по центру */
background-position: left; /* фон слева по центру */
background-position: right; /* фон справа по центру */
background-position: top; /* фон вверху по центру */
background-position: bottom; /* фон внизу по центру */

Точные значения в единицах измерения CSS

Вы можете управлять расстоянием фона от левого и верхнего краев элемента с помощью точных значений, указанных в единицах измерения CSS (например, в пикселях либо em). Пример:


div {
background-position: 10px 25px;
}

Такая запись означает, что фон удален от левого края на 10 пикселей и от верхнего края на 25 пикселей. Здесь важен порядок записи значений: первое значение отвечает за положение фонового рисунка по горизонтали, второе — по вертикали. Допустимы и отрицательные значения (например, они могут быть полезны в случае, если с левой или верхней стороны фоновой картинки есть область, которую необходимо спрятать).

Регулировать расстояние фона, отталкиваясь от правой или нижней стороны элемента, можно с помощью специального значения, которое записывается так:


div {
background-position: right 15px bottom 40px;
}

Здесь ключевые слова right и bottom говорят браузеру, что вы хотите делать отсчет от правой и нижней стороны. Следом за каждым из ключевых слов записывается желаемое значение. Так, 15px — это расстояние между фоном и правой стороной элемента, а 40px — расстояние между фоном и нижней стороной элемента.


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

Большое удобство предоставляет возможность записи значений в процентах. Расстояние вычисляется, исходя из размеров элемента с заданным фоном. Допустимы отрицательные процентные значения, но результат здесь может быть неожиданным.

Лучший способ понять, как перемещается фон под управлением процентных значений — это попрактиковаться. А пока что покажем несколько примеров позиционирования фона через проценты:


Обратите внимание: значение 50% идеально центрирует фоновое изображение (как по вертикали, так и по горизонтали), поскольку точка центра устанавливается в середине фона, а не в его начале или конце.

Комбинирование значений

Да, вы можете записывать для каждой из осей свое значение в необходимых единицах измерения (либо используя ключевое слово). Комбинируйте точные значения с относительными, ключевые слова со значениями в единицах измерения — полная свобода действий. Примеры:


Важно: фоновые изображения и печать

Как правило, при печати страницы фоновые изображения не отображаются. Учитывайте это при работе с важной графикой — например, логотип компании, карту проезда и другие иллюстрации, содержащие важную информацию, рекомендуется добавлять через тег <img>.

Поддержка браузерами

Запись background-position с двумя параметрами поддерживается всеми используемыми браузерами.

Запись с четырьмя параметрами для отсчета от правой и нижней сторон работает только в IE9+, Firefox 13+, Chrome 25+, Safari 7+.

Свойства background-position-x и background-position-y не поддерживаются браузером Firefox вплоть до 48-й версии, а также не воспринимаются мобильными браузерами Opera Mini и Opera Mobile до версии 12.1.

Подробную информацию вы всегда можете посмотреть на сайте Caniuse.com.

Далее в учебнике: background-attachment — фиксация фона.

css — фон на блочных и встроенных элементах?

спросил

Изменено 13 лет, 2 месяца назад

Просмотрено 1к раз

На что ссылается фон в блочной модели (содержимое, отступы, границы и поля)?

Другими словами, какая часть блочной модели будет настроена на отображение цвета фона, если я установлю его на зеленый?

и это только блочные элементы (div, заголовок и т.

д.), которые применяются к блочной модели? есть ли у встроенных элементов (span, text) отступы, границы и поля?

Полное заполнение элементов, не включая пространство, занятое полями. Вы можете проверить это с помощью следующей разметки/css:

 .block { margin:5px; заполнение: 0; ширина: 25 пикселей; высота: 25 пикселей;
         цвет фона: оранжевый; плыть налево; }
<дел>
<дел>

Визуализируйте это, и вы увидите в общей сложности 10 пикселей между оранжевыми прямоугольниками — наши поля.

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

На этой небольшой диаграмме показано, как поле отображается в браузере: сама коробка и любой контент, который может ее окружать. Граница — это просто линия вокруг поля. Отступ — это пространство между краем блока и содержимым внутри блока. Любые установленные вами фоны будут заполнять всю рамку (внутри границ), сохраняя поля (пустое пространство) вокруг рамки.

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

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Есть ли способ установить только фон блочных элементов только до конца текста

спросил

Изменено 6 лет, 9 месяцев назад

Просмотрено 102 раза

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

отображение: блок свойства.

h2 и p являются блочными элементами, когда вы устанавливаете фон для этих блочных элементов окружающий элемент будет выглядеть как коробка.

см. ниже:

Если я устанавливаю css display: inline для этих элементов блока, фон применяется только к тексту, окружающему элемент.

см. ниже:

Как применить фон только вокруг текста, как показано выше, но с сохранением свойства css дисплей: блок к элементу. Существуют ли какие-либо хаки в css или javascript для получения того же результата, что и выше?

  • html
  • css

Добавьте встроенный элемент внутри блочного элемента, например:

 
Текст здесь...

и стиль встроенного элемента.

 span {фон: красный;}
 
 сильный {
цвет фона:#ffa500;

}
охватывать{
цвет фона: # 03a9ф4;

} 
 Lorem Ipsum — это просто фиктивный текст полиграфической и наборной промышленности.
Comments
Leave Comment