Код фона, бэкграунд(как сделать фиксированный фон сайта)? — Вопрос от Santoz Santoz

  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

  • Вопросы новичков (16649)
  • Платные услуги (2161)
  • Вопросы по uKit (82)

Контент-модули

  • Интернет-магазин (1442)
  • Редактор страниц (237)
  • Новости сайта (501)
  • Каталоги (809)
  • Блог (дневник) (114)
  • Объявления (296)
  • Фотоальбомы (434)
  • Видео (257)
  • Тесты (60)
  • Форум (581)

Продвижение сайта

  • Монетизация сайта (222)
  • Раскрутка сайта (2462)

Управление сайтом

  • Работа с аккаунтом (5354)
  • Поиск по сайту (427)
  • Меню сайта (1767)
  • Домен для сайта (1545)
  • Дизайн сайта (13508)
  • Безопасность сайта (1489)
  • Доп. функции (1310)

Доп. модули

  • SEO-модуль (225)
  • Опросы (63)
  • Гостевая книга (99)
  • Пользователи (433)
  • Почтовые формы (320)
  • Статистика сайта (198)
  • Соц. постинг (213)
  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (645)
  • PHP и API на uCoz (236)
  • SMS сервисы (10)
  • Вопросы по Narod.
    ru (434)
  • Софт для вебмастера (39)

…

Использование цветов темы в настройках SharePoint Framework

  • Статья

При создании настроек SharePoint Framework следует использовать цвета темы, чтобы настройки сочетались с дизайном сайта. В этой статье показано, как ссылаться на цвета темы контекстного сайта в решении SharePoint Framework.

Примечание.

В этой статье в качестве примера используется клиентская веб-часть 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. Для веб-частей, созданных с помощью других библиотек и типов настроек, может потребоваться соответствующая корректировка изменений.

Использование цветов темы

  1. В редакторе кода откройте файл ./src/webparts/helloWorld/components/HelloWorld.tsx и из DIV с классом ms-Grid-row удалите класс ms-bgColor-themeDark.

  2. В этой же папке откройте файл HelloWorld.module.scss. Измените селектор .row на следующий:

    .row {
  padding: 20px;
  background-color: "[theme: themeDark, default: #005a9e]";
}

  3. В селекторе .button замените свойства background-color и border-color указанными ниже:

    . button {
  /* ... */
  background-color: "[theme: themePrimary, default: #0078d7]";
  border-color: "[theme: themePrimary, default: #0078d7]";
  /* ... */
}

  4. При добавлении веб-части на сайт цвета, используемые веб-частью, автоматически адаптируются к цветам темы, используемым на текущем сайте.

Поддержка фона разделов

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

Веб-часть без поддержки вариантов темы использует белый фон независимо от выбранного цвета фона раздела.

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

Доступные маркеры темы и их вхождения

В контексте современных сайтов 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: background-attachment: `fixed` | Могу ли я использовать.

.. Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

Свойство CSS: background-attachment: `fixed`

  • Глобальное использование
    77,35% + 19,82% «=» 97,17%
IE
  1. 6–8: не поддерживается
  2. 9–10: поддерживается
  3. 11: Поддерживается
Edge
  1. 12 — 112: Поддерживается
  2. 113: Поддерживается
Firefox
  1. 2–112: поддерживается
  2. 113: поддерживается
  3. 114–115: поддерживается
Chrome
  1. 16% — Supported»> 4–112: поддерживается
  2. 113: поддерживается
  3. 114–116: поддерживается
Safari
  1. 3.1–13.1: поддерживается
  2. 14 — 16.3: Частичная поддержка
  3. 16.4: Частичная поддержка
  4. 16.5 — TP: Частичная поддержка
Opera
  1. 10: Не поддерживается
  2. 11.5 — 97: Поддерживается
  3. 98: Поддерживается
9 0012 Safari на iOS
  1. 3.2 — 4.3: не поддерживается
  2. 5 — 16.3: Частичная поддержка
  3. 42% — Partial support»> 16.4: Частичная поддержка
  4. 16.5: Частичная поддержка
Opera Mini
  1. все: Поддержка неизвестна
Браузер Android
  1. 2.1–4.4.4: не поддерживается
  2. 113: поддерживается
Opera Mobile
  1. 12–12.1: не поддерживается
  2. 73: поддерживается
Chrome для Android
    90 113 113: Поддерживается
Firefox для Android
  1. 113: Поддерживается
UC Browser для Android
  1. 13.4: поддержка неизвестна
Samsung Internet
  1. 68% — Supported»> 4–19.0: поддерживается
  2. 20: поддерживается
900 12 Браузер QQ
  1. 13.1: Поддержка неизвестна
Браузер Baidu
  1. 13.18: Поддержка неизвестна
Браузер KaiOS
  1. 2.5: Поддержка неизвестна
  2. 3: Поддержка неизвестна

Как создать фоновое видео с фиксированным вложением. Помоги пожалуйста! — Как

tgary719 (Томас)

1

Привет! Я пытаюсь понять, как я могу сделать фон видео неподвижным, как вы можете сделать с изображениями. Я пробовал тонны CSS и продолжаю терпеть неудачу.

Видео, которое я хочу сделать фиксированным фоновым видео, расположено на главной странице сайта в самом верху. https://milehighexchangors.com/

Чтобы упростить CSS, я присвоил строке, содержащей видео, класс my-row. Я чувствую, что это должен быть простой CSS, такой как у меня ниже, однако он не работает. Пожалуйста помоги!

#my-row.fl-row-bg-video .fl-row-content {

background-attachment: исправлено;

}

Спасибо!

тгари719 (Томас)

2

Я знаю, что есть некоторые CSS-свисты, что это торт для лол

janet4now (Джанет Л. Армстронг)

3

Я сейчас не вижу там видео, но если вы хотите сделать полный фон видео:

видео {
object-fit: cover;
ширина: 100vw;
высота: 100вх;
положение: фиксированное;
верх: 0;
осталось: 0;
}

tgary719 (Томас)

4

Привет!

Итак, за словами «ПРИСОЕДИНЯЙТЕСЬ К САМОЙ УДИВИТЕЛЬНОЙ ГРУППЕ R/E EXCHANGE В КОЛОРАДО» в самом верху https://milehighexchangors.com/ сразу под заголовком воспроизводится фоновое видео.

Еще раз спасибо за любую помощь. Я думаю, что часть, вызывающая проблемы, может быть связана с исправлением div и видео. Хотя не уверен.

Спасибо за любую помощь!

джанет4ноу (Джанет Л. Армстронг)

5

Вы должны использовать position:fixed, чтобы div оставался на месте.

тгари719 (Томас)

6

Еще раз привет!

Поэтому каждый раз, когда я устанавливаю блок div в фиксированное положение, он подтягивает блоки под ним, как показано на этом снимке экрана. Даже когда я устанавливаю div под его положением в фиксированное положение, он все равно всплывает.

Еще раз спасибо за вашу помощь!

джанет4ноу (Джанет Л. Армстронг)

7

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

тгари719 (Томас)

8

Хорошо! Ты потрясающийгггг! Совсем забыл добавить поля. Последняя проблема, с которой у меня возникла проблема, — это z-индекс этих двух элементов div. Я хочу, чтобы нижний div (my-roww) закрывал верхний div (my-row) при прокрутке, тогда как в настоящее время верхний div (my-row) закрывает вторичный при прокрутке. Я установил второе погружение на 999, и оно все еще не работает. Я также попытался установить для первого погружения отрицательное значение, но тогда это был просто белый div.

Вот мой Css на данный момент:

#my-row{

 position:fixed;
ширина: 100%;
z-индекс: 1 !важно;

}

#my-roww{
z-index: 999 !important;
}

Еще раз спасибо за помощь!

тгари719 (Томас)

9

Хорошо, я солгал. Я исправил эту часть, потому что вторичный div также не был зафиксирован. Нееет, проблема у меня в том, что нижний колонтитул не прикреплен. Я уверен, что это потому, что он обычно позиционируется относительно в теме, а остальные фиксированы, как легко это исправить?

тгари719 (Томас)

No related posts.