background-color — цвет фона | CSS справочник
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
CSS свойство background-color устанавливает цвет фона для элемента. Фон охватывает общий размер элемента, включая внутренние отступы и рамки (не распространяясь на внешний отступ — margin).
Обратите внимание, что по умолчанию фон не наследуется от родительского элемента, однако дочерние элементы, благодаря прозрачности своего фона (задано по умолчанию), будут содержать часть фона родительского элемента.
Цвет фона можно установить различными способами, к примеру: указать имя цвета, использовать шестнадцатеричные значения или с помощью синтаксиса RGB, как именно это сделать, вы можете увидеть в примере ниже, где показано применение различных способов задания цвета фона.
Примечание: если добавить свойство background-color к тегу <body>, цвет заполнит все окно браузера. Однако если так же добавить цвет фона для тега <html>, то фон элемента <body> будет заполнять только область с содержимым, если оно есть.
Совет: вместо монотонного цвета, в качестве фона, можно использовать любое изображение, для этого стоит воспользоваться свойством background-image. Так же стоит обратить внимание на свойство background-clip, используемое для определения области в элементе, на которую будет распространяться фон.
| Значение по умолчанию: | transparent |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object. style.backgroundColor=»#00FF00″ |
Синтаксис
background-color: цвет|transparent|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| цвет | Цвет фона можно установить различными способами: указать имя цвета, использовать шестнадцатеричные значения, с помощью синтаксиса rgb (rgba) или hsl (hsla). |
| transparent | Указывает, что фон будет прозрачным. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
background-color:
red
blue
#000000
#ff9900
rgb(255,255,255)
rgb(255,130,255)
div {
border-style: solid;
border-bottom-width: thin;
}
- Статья
При создании настроек SharePoint Framework следует использовать цвета темы, чтобы настройки сочетались с дизайном сайта.
Примечание.
В этой статье в качестве примера используется клиентская веб-часть SharePoint Framework, но описанные способы применимы ко всем типам настроек SharePoint Framework.
Фиксированные цвета или цвета темы?
При формировании шаблонов новой клиентской веб-части SharePoint Framework используется фиксированная синяя палитра. Если добавить такую веб-часть на современный сайт с другой цветовой схемой, она будет выделяться и выглядеть неорганично.
Используя фиксированные цвета, вы заранее определяете, какие цвета хотите использовать для каких элементов. Это может привести к ситуации, когда, отображаясь на красном сайте группы, синяя веб-часть выделяется и выглядит неуместно. В большинстве случаев лучше использовать цвета темы контекстного сайта, чтобы решение не выделялось, а сочеталось с сайтом.
SharePoint Framework позволяет использовать цвета темы контекстного сайта вместо фиксированных цветов.
Как следствие, если веб-часть размещена на сайте с использованием красной темы, она также будет использовать красную палитру, а при помещении на сайт с использованием синей темы она будет автоматически настроена на использование синей палитры. Все это происходит автоматически без каких-либо изменений кода веб-части.
Работая с фиксированными цветами, вы указываете их в свойствах CSS, как показано в примере ниже.
.button {
background-color: #0078d7;
}
Чтобы вместо этого использовать цвет темы, замените фиксированный цвет на маркер темы:
.button {
background-color: "[theme: themePrimary, default: #0078d7]";
}
Когда настройка SharePoint Framework загружается на страницу, пакет @microsoft/load-themed-styles, являющийся частью SharePoint Framework, будет искать маркеры темы в файлах CSS и пытаться заменить их соответствующим цветом из текущей темы. Если значение для указанного маркера недоступно, SharePoint Framework использует значение, указанное с помощью стандартного параметра, поэтому важно, чтобы оно всегда было включено.
Использование цветов темы в настройках
При формировании шаблонов новой клиентской веб-части SharePoint Framework по умолчанию используется фиксированная синяя палитра. Ниже приведены действия, которые необходимо выполнить, чтобы веб-часть использовала цвета темы.
Примечание.
Указанные ниже инструкции относятся к клиентской веб-части SharePoint Framework HelloWorld, созданной с помощью React. Для веб-частей, созданных с помощью других библиотек и типов настроек, может потребоваться соответствующая корректировка изменений.
Использование цветов темы
В редакторе кода откройте файл ./src/webparts/helloWorld/components/HelloWorld.tsx и из DIV с классом ms-Grid-row
удалите класс ms-bgColor-themeDark.В этой же папке откройте файл HelloWorld.module.scss. Измените селектор
.rowна следующий:.row { padding: 20px; background-color: "[theme: themeDark, default: #005a9e]"; }В селекторе
.замените свойства
buttonbackground-colorиborder-colorуказанными ниже:.button { /* ... */ background-color: "[theme: themePrimary, default: #0078d7]"; border-color: "[theme: themePrimary, default: #0078d7]"; /* ... */ }При добавлении веб-части на сайт цвета, используемые веб-частью, автоматически адаптируются к цветам темы, используемым на текущем сайте.
Поддержка фона разделов
Пользовательские настройки, использующие цвета темы, могут все еще выделяться, если они не реагируют на изменения фона раздела через поддержку вариантов темы. Для дополнительной информации смотрите раздел Поддержка фона разделов.
Веб-часть без поддержки вариантов темы использует белый фон независимо от выбранного цвета фона раздела.
Веб-часть, настроенная для поддержки вариантов темы, может применять фон раздела к фону веб-части.
Доступные маркеры темы и их вхождения
В контексте современных сайтов SharePoint значения, связанные с маркерами тем, имеют многочисленные вхождения в интерфейсной части, системной странице и пользовательском интерфейсе веб-части SharePoint.
Чтобы наилучшим образом согласовать ваши настройки с общим внешним видом, следует рассмотреть возможность использования соответствующих жетонов тем.
Вы можете использовать следующие маркеры темы:
Примечание.
Значения по умолчанию ниже соответствуют значениям по умолчанию на современном сайте группы при использовании красной палитры.
| Маркер | По умолчанию | Примечания |
|---|---|---|
themeDark | #7c1d21 | Некоторые кнопки нажимают и цвет ссылки (например, «Вернуться к классическому SharePoint»). Значок заголовка «Подписаться» в заголовке, если используется третий цвет фона заголовка. Системные страницы: кнопка ОК, граница и наведение. |
themeDarkAlt | #932227 | Множество значков (например, в панели команд), некоторые границы, наведение кнопок / ссылок, фон вращающегося элемента, фокус элемента диапазона, наведение фона флажка, веб-части и списки, наведение кнопки, фокус элемента диапазона, добавление значка веб-части в третьем разделе цвет фона выбран. |
themeDarker | #5b1519 | Наведите курсор на цвет для некоторых ссылок. Системные страницы: Цвет посещенной ссылки. |
themeLight | #e3afb2 | Выбор диапазона наведения и фокусировка фона. Загрузка цвета фона счетчика в режиме просмотра содержимого сайта. |
themeLighter | #f0d3d4 | Цвет фона меню навигации, добавьте цвет фона панели веб-частей, цвет фона изображения в некоторых веб-частях при выборе параметра цвета фона третьего раздела. Системные страницы: Навигация при наведении фона, кнопка отмены при наведении фона. |
themeLighterAlt | #fbf4f4 | Один из вариантов фона раздела. Cogwheel меню наведения фона в представлении содержимого сайта. |
themePrimary | #a4262c | Некоторые фоны кнопок и флажков, ссылки, тексты, границы и значки, значки и ссылки. |
themeSecondary | #ae383e | Текст панели набора в просмотре содержимого сайта. Наведите курсор на цвет для некоторых ссылок. Цвет фона изображения в некоторых веб-частях при выборе цвета фона четвертого раздела. Второй цвет в значке палитры в «Изменение панели внешнего вида» (отсюда и название токена) |
themeTertiary | #c86c70 | Добавьте значок веб-части, если выбран четвертый цвет фона. Третий цвет в значке палитры в «Изменение панели внешнего вида» (отсюда и название токена) |
neutralDark | #212121 | Некоторые кнопки, ссылки и границы наведения текста, некоторые значки. Системные страницы: страницы хлебных крошек, заголовки текстов. |
neutralLight | #eaeaea | Некоторые границы веб-части, указатель действий на панели команд, фон панели команд при выборе элемента списка, фон заголовка категории представления списка при выборе элемента, указатель кнопки. Системные страницы: фон вкладки ленты, граница кнопки «ОК», фон выбранного элемента навигации, отключенная граница текстового поля. Разделительная веб-часть. Цвет фона изображения в некоторых веб-частях, если выбран параметр цвета фона второго раздела. |
neutralLighter | #f4f4f4 | Некоторые фоны меню (например, панель команд), выбранный левый элемент навигации, некоторые фоны кнопок, одна опция для цвета фона раздела. |
neutralLighterAlt | #f8f8f8 | Левый навигационный фон при наведении, фон текста информационной панели списка, цвет фона изображения в некоторых веб-частях при выборе цвета фона первого раздела, некоторые значки и тексты при редактировании веб-частей. Системные страницы: фон кнопки «Отмена», фон текстового поля отключен. |
neutralPrimary | #333333 | Текст заголовка сайта, тексты в меню навигации, панель команд, кнопки и веб-части, фон значков, связанных с веб-частью, когда страница находится в режиме редактирования, добавление значков и текста панели веб-частей, текст панели настроек веб-части. Системные страницы: цвет стрелки выпадающего меню, некоторые тексты. |
neutralPrimaryAlt | #3c3c3c | Фон панели сюжета в представлении содержимого сайта. |
neutralSecondary | #666666 | Некоторые тексты меню, пустой текст библиотеки, некоторые фоны при наведении иконки, некоторые тексты в веб-частях, стрелки на панели команд, селектор диапазона. Системные страницы: цвет ссылки, некоторые значки и границы. |
neutralTertiary | #a6a6a6 | Некоторые тексты кнопок, некоторые заголовки веб-частей, некоторые тексты настроек веб-частей, некоторые значки веб-частей, наведение курсора в некоторых веб-частях, пунктирная граница раздела в режиме редактирования, граница панели управления настройками веб-части. Наиболее заметно при редактировании веб-частей. Системные страницы: текстовое поле, раскрывающийся список и цвет рамки кнопки. |
neutralTertiaryAlt | #c8c8c8 | Некоторые тексты, например, на панели свойств веб-части, некоторые значки в веб-частях, фон селектора диапазона, некоторые кнопки на фоне щелчка мышью, фон управления переключением да / нет, изменение границы настройки цвета фона раздела. |
neutralQuaternary | #d0d0d0 | Фон панели команд при наведении фона, когда выбран элемент списка. Системные страницы: Границы |
black | #000000 | Текст раскрывающегося списка параметров веб-части, элементы управления карусели, наведите указатель мыши на текст вкладки содержимого сайта, текст панели «Изменить внешний вид». |
white | #ffffff | Основной фон тела, фон ввода поиска, некоторый текст кнопки, текст навигации концентратора, если выбран фон заголовка themePrimary, один из доступных цветов фона раздела. Системные страницы: Фон основного текста |
neutralQuaternaryAlt | #dadada | Значок «Информация» и фон выбранного эллипса в списках, фоны некоторых элементов веб-части в режиме редактирования, фон выпадающего элемента панели свойств веб-части, фон выбранного элемента списка. |
accent* | #ca5010 | Четвертый цвет в палитре на панели «Изменить внешний вид». |
whiteTranslucent40* | "rgba(255,255,255,.4)" | Закрывает остальную часть страницы, когда модальный диалог открыт. |
blackTranslucent40* | "rgba(0,0,0,.4)" | Охватывает оставшуюся часть страницы в определенных состояниях модальных диалоговых окон, например при развертывании диалогового окна поиска веб-частей |
backgroundOverlay* | (пусто) | Основной фон содержимого сайта, некоторые границы, т.е. между центром и навигацией по сайту |
primaryBackground* | #ffffff | Некоторые фоны при редактировании настроек веб-части, некоторые фоны текстового поля |
*Не входит в генератор тем.
Вхождение маркеров темы в пользовательском интерфейсе SharePoint зависит от выбранных цветов фона (т.
е. маркер темы white используется для ссылок навигации заголовка, если выбран темный фон заголовка, в противном случае используется neutralSecondary). Для получения дополнительной информации см. раздел Дизайн фона» с использованием семантических слотов.
Примечание.
В SharePoint Framework зарегистрировано больше токенов, хотя только подмножество, упомянутое выше, может быть назначено в пользовательских темах на современных сайтах SharePoint (остальные генерируются автоматически механизмом тем). Полный список доступных маркеров см. в значении свойства window.__themeState__.theme (используйте консоль в средствах разработчика веб-браузера).
Настройка цвета темы
Чтобы настроить цвета темы, необходимо создать собственную тему и добавить ее в клиент SharePoint для выбора на целевом сайте или в концентраторе. См. Тему сайта SharePoint для получения дополнительной информации.
См. также
- Темы и цвета SharePoint
- Проектирование фоновых разделов с использованием семантических слотов
- Фоны раздела SharePoint
- Использование цветов темы в веб-частях SPFX, Стефан Бауэр (разработка для Office, MVP)
- Как создать разноцветную тему для современного сайта SharePoint Online, Лаура Коккаринен (SharePoint PnP Core MVP)
Невозможно изменить цвет фона в CSS — CSS
css1432620014 1
Я хочу изменить цвет фона в элементе div CSS, где я ранее объявил цвет фона в родительском элементе. Это не. работает, Это, наверное, что-то простое, но я в тупике.
[кодовый байт]
[/кодовый байт]
Чайный уют
Это будет blackspoce
Наша миссия
Собранный вручную, отобранный вручную, свободный выгул, экологичный, небольшая партия, справедливая торговля, органический чай
Это будет черная точка
Какое правило CSS производит такой эффект? Я не вижу этого в вашем коде CSS.
Я удалил всю папку и снова начну с проекта Tea Cozy. Разочаровывает, но хороший опыт обучения.
В этом уроке мы будем использовать эти значения непрозрачности для изменения непрозрачности цветов. Мы рассмотрим примеры и покажем вам разницу в цветах, когда мы используем значение непрозрачности с исходным цветом. Давайте посмотрим на следующие примеры:.jpg)
На этот раз «непрозрачность» равна «0,8». И в последнем заголовке мы использовали исходный желтый цвет без использования какого-либо значения непрозрачности.
«Значение непрозрачности» здесь равно «0,2». Значение «альфа» представляет «непрозрачность». Цвет фона второго div также зеленый с альфа-значением «0,4». Альфа-значение для третьего div равно «0,7» с тем же зеленым цветом.
Цвет «p6» — «розовый» со значением непрозрачности «0,8», а код записывается как «rgba (255, 0, 255, 0,8)». Последний абзац, «p66», имеет «фоновый цвет» «розовый» без прозрачности.
