Background css3: background — CSS&colon; Cascading Style Sheets - Блог сумасшедшего сисадмина

Содержание

background | htmlbook.ru

CSS	Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
2.1	6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	2.1+	1.0+
3	9.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 1	CSS 2	CSS 2.1	CSS 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.

Цвет и фон

background | CSS | WebReference

Содержание
- Краткая информация
- Синтаксис
- Значения
- Пример
- Спецификация
- Браузеры

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

Значение по умолчанию	transparent \|\| none \|\| repeat \|\| scroll \|\| 0% 0%
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис

background: [<фон>, ]* <последний_фон>

Здесь:

<фон> = background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip

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

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

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

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>background</title> <style> div { height: 200px; /* Высота блока */ width: 200px; /* Ширина блока */ overflow: auto; /* Добавляем полосы прокрутки */ padding-left: 15px; /* Отступ от текста слева */ background: url(/example/image/hand.png) repeat-y #fc0; /* Цвет фона, путь к фоновому изображению и повторение фона по вертикали */ } </style> </head> <body> <div>Великобритания, куда входят Пик-Дистрикт, Сноудония и другие многочисленные национальные резерваты природы и парки, неумеренно применяет культурный рельеф.

Суша морей начинает туристический подземный сток. Дождливая погода дегустирует кандым. Винный фестиваль проходит в приусадебном музее Георгикон, там же беспошлинный ввоз вещей и предметов в пределах личной потребности связывает белый саксаул. Санитарный и ветеринарный контроль оформляет городской Гвианский щит.</div> </body> </html>

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

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

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

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

Объект.style.background

Спецификация

Спецификация	Статус
CSS Backgrounds and Borders Module Level 3	Возможная рекомендация
CSS Level 2 Revision 1 (CSS 2. 1)	Рекомендация
CSS Level 1	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.

Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры


один фон	4	12	1	3.5	1	1
несколько фонов	9	12	1	10.5	1.3	3.6


один фон	2.1	1	10	3.2
несколько фонов	2.1	1	10	3.2

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Цвет и фон

См. также

background-attachment
background-clip
background-image
background-origin
background-position
background-repeat
background-size
Линейный градиент
Несколько фоновых картинок
Спрайты
Установка фона и градиента
Фоновая картинка

Рецепты

Как вместо символа маркера использовать картинку?
Как добавить две фоновые картинки к одному элементу?
Как добавить рисунок к внешним ссылкам?
Как изменить цвет кнопки?
Как изменить цвет ссылки при наведении?
Как размыть фоновую картинку?
Как указать язык сайта по ссылке?

Практика

Атрибут style
Полупрозрачный фон
Сокращённое значение цвета
Фоновая картинка
Цвет в RGB
Цвет фона таблицы
Цвет фона у ссылок
Шестнадцатеричный цвет

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 18. 03.2018

Редакторы: Влад Мержевич

Фоны CSS

❮ Назад Далее ❯

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

В этих главах вы узнаете о следующих свойствах фона CSS:

background-color
фоновое изображение
повтор фона
фоновое приложение
фоновая позиция
фон (сокращенно свойство)

CSS background-color

Свойство background-color указывает цвет фона элемента.

Пример

Цвет фона страницы задается следующим образом:

body {
background-color: lightblue;
}

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

С помощью CSS цвет чаще всего задается следующим образом:

допустимое имя цвета, например, «красный»
шестнадцатеричное значение, например «#ff0000»
значение RGB — например, «rgb(255,0,0)»

Полное описание см. в разделе Значения цветов CSS. список возможных значений цвета.

Другие элементы

Вы можете установить цвет фона для любых элементов HTML:

Пример

Здесь элементы

,

будут иметь разные цвета фона:

h2 {
цвет фона: зеленый;
}

div {
цвет фона: голубой;
}

p {
фоновый цвет: желтый;
}

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

Непрозрачность/прозрачность

Свойство opacity определяет непрозрачность/прозрачность элемента. Может принимать значение от 0,0 до 1,0. Чем ниже значение, тем прозрачнее:

непрозрачность 1

непрозрачность 0,6

непрозрачность 0,3

непрозрачность 0,1

Пример

div {
background-color: green;
непрозрачность: 0,3;
}

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

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

Прозрачность с использованием RGBA

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

Непрозрачность 100 %

Непрозрачность 60 %

Непрозрачность 30 %

Непрозрачность 10 %

Из главы «Цвета CSS» вы узнали, что в качестве значения цвета можно использовать RGB. Помимо RGB, вы можете использовать значение цвета RGB с альфа-каналом (RGB A ), который определяет непрозрачность цвета.

Значение цвета RGBA указывается с помощью: rgba(красный, зеленый, синий, альфа ). Параметр alpha представляет собой число от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный).

Совет: Вы узнаете больше о цветах RGBA в нашей главе о цветах CSS.

Пример

div {
background: rgba(0, 128, 0, 0.3) /* Зеленый фон с непрозрачностью 30% */
}

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

Свойство цвета фона 66

8 CSS

8 Свойство

Описание
цвет фона	Задает цвет фона элемента

❮ Предыдущий Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

COLOR PICKER

КОД ИГРЫ

Играть в игру

Лучшие ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.

CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

8 Top Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Галерея шаблонов CSS3

Нажмите на шаблон, чтобы развернуть его
Текстовые поля доступны для редактирования
Поддержка браузера
Отправить новый
Репозиторий Github
Наслаждайтесь!

mcbroom.me»/>
com/#post-22″/>
jadu.net»/>

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

Сами шаблоны должны работать на Firefox 3.6+ , Chrome , Safari 5.1 , Opera 11.10+ и IE10+ . Однако ограничения реализации могут привести к тому, что некоторые из них не будут отображаться правильно даже в этих браузерах (например, на момент написания Gecko довольно глючил с радиальными градиентами).

Кроме того, эта галерея не будет работать в Firefox 3.

Background css3: background — CSS: Cascading Style Sheets

background | htmlbook.ru

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

Версии CSS

Описание

Синтаксис

Значения

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

Браузеры

background | CSS | WebReference

Синтаксис

Обозначения

Значения

Пример

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

Спецификация

Спецификация

Браузеры

Браузеры

См. также

Рецепты

Практика

Автор и редакторы

Фоны CSS

CSS background-color

Пример

Другие элементы

Пример

,

Непрозрачность/прозрачность

Пример

Прозрачность с использованием RGBA

Пример

Свойство цвета фона 66

COLOR PICKER

КОД ИГРЫ

Top Tutorials

Лучшие ссылки

Галерея шаблонов CSS3

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

Добавить комментарий Отменить ответ

Рубрики

Рубрики