Цвет заднего фона html: Как изменить цвет фона и текста веб-страницы?

Содержание

html — Как убрать цвет заднего фона при скруглении

Вопрос задан 5 лет 9 месяцев назад

Изменён 5 лет 9 месяцев назад

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

Проблема тут:

.main
{
  width:100px;
  height:150px;
  background:red;
  border-radius:50px;
  overflow:hidden;
}
.main div
{
  width:50px;
  height:150px;
  background:white;
}

<div>
  <div></div>
</div>

Как можно видеть правая левая половина со скруглением отображает задний фон, как это пофиксить?

P.S linear-gradient не предлагать!

html
css

Оно?

.main {
  width:100px;
  height:150px;
  background:red;
  border-radius:50px;
  overflow: visible;
  background-clip: padding-box;  
  -moz-background-clip: padding;  
  -webkit-background-clip: padding;
}
.  main div {
  width:50px;
  height:150px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  background:green;
}

<div>
  <div></div>
</div>

Подробности вот тут и вот тут

Краткое описание:

A box’s backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

Бекграунд не предлагать, но доп. элементы никто не запрещал … xDD

.main
{
  width:100px;
  height:150px;
  border-radius:50px;
  overflow:hidden;
}

. main:after {
  content: '';
  clear: both;
}

.main div
{
  float: left;
  width: 50%;
  height: 150px;
}

.main div:nth-child(1) { background-color: white; }
.main div:nth-child(2) { background-color: red; }

<div>
  <div></div>
  <div></div>
</div>

Вообще без контекста задачи сложно понять зачем это нужно и какими условиями можно пренебречь. Без «костылей» тут никак, а что бы костыли городить нужно понимать какой диагноз у пациента.

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как установить цвет фона для ячейки HTML-таблицы? — efim360.

У нас есть примитивная таблица в HTML-разметке (скопируй код себе, чтобы потренироваться):

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Визуально в браузере это выглядит так:

Таблица в HTML-разметке на одну запись с тремя столбцами

Мы хотим поменять цвет средней ячейки, которая содержит слово «asd«. Как это сделать?

Получение объекта ячейки

Получаем сам объект ячейки с нужным нам словом. Например так (актуально для нашего случая):

document.querySelector("body > div > table > tbody > tr > th:nth-child(2)")

Если смотреть в браузере на вкладке Console, то отобразить объект со всеми его свойствами можно командой:

console.dir(document.querySelector("body > div > table > tbody > tr > th:nth-child(2)"))

Вывод будет выглядеть так:

Вывели свойства объекта HTML-элемента в консоль браузера

Получение свойства, отвечающего за графическое оформление

Среди всех его свойств нас будет интересовать свойство «style«, которое хранит объект класса CSSStyleDeclaration, описанного в стандарте CSSOM.

Свойство style в экземпляре HTMLTableCellElement — JavaScript

Получение свойства, отвечающего за цвет заднего фона для HTML-элемента

В свою очередь, экземпляр CSSStyleDeclaration хранит свойство «backgroundColor«, которое в данный момент имеет значение пустой строки.

Свойство backgroundColor объекта CSSStyleDeclaration равно пустой строке — JavaScript

Именно это свойство нам нужно поправить, чтобы реально-отображаемый цвет ячейки таблицы изменился.

То есть нам нужно написать строку в синтаксисе, понятном для анализатора цветов в CSS. Это тема отдельного занятия, поэтому я просто буду использовать цвет «rgb(255 255 0)«.

Обновление цвета ячейки таблицы при помощи JavaScript

Теперь мы можем выстроить цепочку выражений, которые установят жёлтый цвет фона для ячейки посередине.

document.querySelector("body > div > table > tbody > tr > th:nth-child(2)").style.backgroundColor = 'rgb(255 255 0)'

Получаем запланированный результат:

Изменили цвет ячейки таблицы на жёлтый — JavaScript

Изменения можно также увидеть в разметке документа.

Изменилась разметка HTML-элемента ячейки таблицы — добавился атрибут style

Информационные ссылки

Стандарт ECMAScript — https://tc39.

es/ecma262/multipage/

Стандарт DOM — https://dom.spec.whatwg.org

Стилизация для высокой контрастности Windows с новыми стандартами для принудительных цветов

Поскольку Microsoft Edge готовился к обновлению платформы поверх Chromium с открытым исходным кодом, мы осознали свою ответственность и продолжаем поддерживать тех, кто зависит от высокой контрастности Windows для веб-контента. Мы также увидели фантастическую возможность — пришло время, наконец, стандартизировать функции высококонтрастного стиля.

Функции CSS для высокой контрастности Windows были доступны в браузерах Microsoft в течение достаточно долгого времени, но имели префикс -ms и не поддерживались в других браузерах. Благодаря сотрудничеству с нашими партнерами по рабочей группе CSS и проекту Chromium, веб-разработчики теперь могут использовать новые веб-стандарты для стилизации своего контента для принудительных цветовых режимов, таких как высокая контрастность Windows.

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

Но сначала, что такое высокая контрастность?

Windows High Contrast

Слева: Windows в светлой цветовой гамме. Справа: окна с высокой контрастностью.

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

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

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

Новые стандарты для принудительных цветов

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

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

Современные реализации также будут соответствовать медиа-запросам Preferences-Color-Scheme и Preferences-Contrast на основе цвета фона (светлый или темный) и уровня контрастности принудительной цветовой схемы пользователя.

Мы ожидаем, что большинству веб-разработчиков потребуется написать очень мало правил CSS для принудительных цветовых режимов, поскольку веб-платформа берет на себя тяжелую работу по удобочитаемости текста и применяет пользовательские цвета к семантическому HTML из коробки. Как правило, любые стили, которые веб-разработчики пишут для принудительных цветовых режимов, являются настройками, специфичными для веб-приложений.

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

Если мы включим функцию высокой контрастности (с пользовательским фиолетовым фоном)…

…кнопка, текст и ссылки будут отображаться в системные цвета пользователя — отлично! Однако образцы палитры также были скорректированы для использования фиолетовой темы пользователя. Обычно это желательно для удобочитаемости.

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

Наши требования к этому виджету таковы:

Мы сохраняем образцы цветов в режимах с принудительной окраской.
Образцы цветов всегда отображаются поверх белого или черного, чтобы не выглядеть мутными. (Помните, что пользователи могут установить любой цвет своей темы!)
Надписи под образцами отображаются в системных цветах пользователя, чтобы они могли легко читать текст.

Во-первых, мы обнаружим принудительный цветовой режим, используя forced-colors media query:

Удаляет принудительные системные цвета, любые текстовые фоновые панели (мы вернемся к этому чуть позже) и любые другие измененные свойства CSS из элемента и его поддерева — по сути, откатывая все принудительные colors mode styling:

Одним из наших заявленных требований было то, что образцы всегда отображались поверх чисто черного или белого фона, чтобы они выглядели четкими независимо от системных цветов пользователя (образцы не будут хорошо смотреться поверх чистого черного или белого фона). индивидуальная схема в тонах сепии!). Белый фон из наших базовых стилей, вероятно, слишком яркий для пользователей, использующих принудительно темную цветовую схему. Мы можем заменить это черным фоном, запросив предпочтительную цветовую схему пользователя:

В режиме Forced Colors Mode Preferences-Color-Scheme оценивается на основе яркости предпочитаемого пользователем цвета фона. В Chromium принудительный фон с яркостью < 0,33 будет соответствовать , предпочитает цветовую схему: темный . В противном случае предпочитает-цветовую-схему: светлая

имеет значение true:

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

Возвращаясь к нашему примеру, мы можем использовать CanvasText для применения цвета текста пользователя и Canvas для применения цвета их фона:

Вот все наши стили вместе:

Вы можете найти полный список системные цвета в спецификации CSS Color. Посмотрите живую демонстрацию.

Prefers-Contrast

В дополнение к медиа-запросу принудительных цветов медиа-запрос «prefers-contrast» недавно был расширен и теперь включает принудительное ключевое слово , которое можно использовать для определения того, активен ли принудительный режим цветов. Таким образом, следующие два медиа-запроса дадут эквивалентные результаты:

Медиа-запрос Preferences-Contrast еще не реализован в Chromium, но авторы могут ожидать, что этот медиа-запрос будет доступен в будущих версиях Microsoft Edge и других Chromium- основанные браузеры. Этот медиа-запрос можно использовать для обнаружения состояний «меньше», «больше» и «без предпочтений» в дополнение к принудительному контрасту. Как отмечалось ранее, предпочтение принудительного контраста не обязательно означает предпочтение высокая контрастность , хотя в будущем рабочая группа CSS может решить автоматически сопоставлять предпочтения «меньше» и «больше» в зависимости от цветовой схемы пользователя.

Скорректированные свойства CSS

Когда активны принудительные цветовые режимы, ограниченный список свойств CSS, связанных с цветом и подобными украшениями, корректируется, чтобы сохранить цветовую схему пользователя, уменьшить визуальные отвлекающие факторы и повысить разборчивость. Спецификация CSS Color Adjustment предоставляет полный список свойств, на которые влияют принудительные режимы цветов.

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

Например, вместо полного удаления свойства контура и применения box-shadow…

Вы можете использовать прозрачный контур:

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

Наши стили состояния фокуса в светлая цветовая схема по сравнению с высокой контрастностью Windows

Наследование цвета в простых SVG

Принудительные цветовые режимы не корректируют SVG: это могут быть очень сложные документы, и веб-разработчик лучше понимает, как следует настраивать SVG или нет. Но что, если вам просто нужен простой значок SVG, соответствующий цвету окружающего текста?

Вы можете применить ключевое слово currentColor к заливке и обводке в SVG. Вот пример с логотипом, где мы указали светлую и темную тему, но не написали никаких стилей принудительного цветового режима:

См. перо
Forced Colors: Simple SVG Demo by Melanie Richards (@somelaniesaid)
на CodePen.

Вычисленный цвет будет унаследован от предков SVG. Поскольку мы использовали ключевое слово currentColor в наших базовых стилях, а не в рамках медиа-запроса, правильный цвет распространялся на SVG через нашу светлую тему, нашу темную тему и автоматически в принудительных цветовых режимах:

Логотип SVG в светлой цветовой гамме, темной цветовой гамме и высокой контрастности Windows в результате использования currentColor

Текстовые задние панели

Помимо сохранения системных цветов пользователя и настройки потенциально отвлекающих свойств CSS, браузеры, поддерживающие принудительную цветовые режимы также рисуют «задние панели» за текстом. Текстовые задние панели были впервые представлены в EdgeHTML (устаревший Microsoft Edge) после тесного сотрудничества с пользователями с плохим зрением и помогают обеспечить читаемость, когда текст накладывается поверх изображений:

Эта практика была перенесена в реализации, основанные на стандартах. Текстовые задние панели в настоящее время не настраиваются веб-разработчиками, хотя использование принудительной настройки цвета : none не отключит их. Мы предполагаем, что предоставление авторам возможности вносить тонкие коррективы в текстовую подложку, например. изменение радиуса границы — может стать интересной функцией CSS в будущем.

Отличия от устаревших реализаций

Стандартизация функций принудительного цветового режима дала возможность пересмотреть устаревшие варианты дизайна и сотрудничать с другими разработчиками в рамках функционального подхода. Таким образом, существуют некоторые заметные различия между новыми стандартами и предыдущей поддержкой высокой контрастности в MSHTML/EdgeHTML.

Сравнение синтаксиса

Наиболее очевидным среди этих изменений является обновление синтаксиса функций CSS:

Internet Explorer и устаревший Microsoft Edge	Новый Microsoft Edge и веб-стандарты
@media (-ms-high-contrast: активно) {}	@media (принудительно выбранные цвета: активно) {}
@media (-ms-high-contrast: черный на белом) {}	@media (принудительно выбранные цвета: активный) и (предпочитает цветовую схему: светлая) {} Примечание. Это не совсем то же самое, что и устаревший медиа-запрос «черное на белом», который соответствовал только определенным темам с высокой контрастностью по умолчанию. Новая реализация будет наблюдать за яркостью цвета фона пользователя, чтобы определить, подходит ли соответствие «prefers-color-scheme: light/dark». В Chromium принудительный фон с яркостью <0,33 будет соответствовать темным цветовым схемам; в противном случае будет соответствовать «prefers-color-color-scheme: light».
@media (-ms-high-contrast: белое на черном) {}	@media (принудительно-цвета: активны) и (предпочитает-цветовую-схему: темные) {} То же примечание, что и предыдущее.
-ms-high-contrast-adjust: нет;	принудительная настройка цвета: нет;

Если вам нужна поддержка современных браузеров и Internet Explorer, вы можете сделать это, объединив мультимедийные запросы и свойства:

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

В целях совместимости новый Microsoft Edge будет использовать псевдоним исходных мультимедийных запросов с префиксом -ms- и свойства настройки для новых стандартных мультимедийных запросов. Тем не менее, мы планируем отказаться от этого псевдонима в будущем и рекомендуем авторам принять новые стандарты принудительного цвета.

Сравнение системных цветов

Некоторые из системных цветов, от которых зависели устаревшие реализации, устарели в веб-стандартах. Новые стандартные системные цвета заменяют старые значения:

Цвет темы в настройках высокой контрастности Windows	Internet Explorer и устаревшая версия Microsoft Edge	Новый Microsoft Edge и веб-стандарты
Текст	`Окнотекст`	`CanvasText`
Гиперссылки	`-ms-горячий свет`	`Текст ссылки`
Отключено Текст	`Серый текст`
Выбранный текст	`HighlightText` (передний план), `Highlight` (фон)
Текст кнопки	`ButtonText` (передний план), `ButtonFace` (фон)
Фон	`Окно`	`Холст`

Различия в стилях агента пользователя (по умолчанию)

Собственные элементы управления формы в Windows High Contrast Black Theme.

Слева: Microsoft Edge Legacy, справа: Microsoft Edge после обновления элементов управления в Chromium.

Совместно с командой Google Chrome мы обновили встроенные элементы управления форм для современных стилей и улучшений специальных возможностей. Это обновление включает в себя обновленный высококонтрастный дизайн Windows.

В устаревших реализациях поддержки высокой контрастности в Интернете посещенные ссылки отображались в пользовательском цвете «Отключенный текст»; это связано с тем, что в этих пользовательских цветовых палитрах с заданной областью отсутствует «Цвет посещенной гиперссылки». Мы получили отзывы о том, что эта цветовая обработка сбивает с толку, поэтому посещенные ссылки теперь имеют обычный цвет «Гиперссылка».

Поведенческие различия

Наиболее примечательным для веб-разработчиков является изменение каскада стилей в принудительных цветовых режимах. В устаревших реализациях поддержки высокой контрастности авторские стили, установленные в @media (-ms-high-contrast: active) {}’, переопределяли бы цвета, применяемые браузером от имени пользователя:

См. перо
Принудительные цвета: Демо-версия Legacy Cascade от Мелани Ричардс (@somelaniesaid)
на CodePen.

Принимая во внимание реализуемость в разных браузерах и каскадный предшествующий уровень техники, рабочая группа W3C по CSS первоначально отвергла это унаследованное поведение и решила, что force-colors-adjust: нет не требуется для переопределения стилей в принудительных цветовых режимах. Однако это разрешение недавно было обновлено, так что использование автором системных цветов CSS переопределяет цвета, установленные пользовательским агентом. Если авторы хотят использовать несистемные значения цвета в принудительных цветовых режимах, им необходимо будет предоставить принудительной настройки цветов: нет; .

См. Pen
Forced Colors: Modern Cascade Demo Мелани Ричардс (@somelaniesaid)
на CodePen.

Это поведение отражает ожидание того, что авторы почти всегда должны использовать системные цвета при настройке стилей для принудительных цветовых режимов. Обновленное каскадное поведение будет доступно в Microsoft Edge начиная с версии 87.

Еще одно предстоящее изменение касается обработки фоновых изображений. Internet Explorer восстановил фоновые изображения в Windows с высокой контрастностью, но это вызвало проблемы с взаимодействием с пользователем, когда для изображений содержимого использовался CSS background-image . Устаревший Microsoft Edge устранил эту проблему, сохранив значение фонового изображения автора. Стандарты теперь приземлились на золотую середину: background-image будет сохранено, если значение содержит функцию url() , и будет восстановлено для всех остальных значений background-image (например, линейных градиентов). Это изменение появится в следующих версиях Microsoft Edge.

Современные реализации также обрабатывают background-color немного по-другому. Текущий подход сохраняет предпочитаемый пользователем фоновый цвет на всех каналах , кроме для альфа-канала. Это изменение позволяет веб-платформе предоставить веб-разработчикам больше гибкости в отношении стилей фона, а удобочитаемость по-прежнему сохраняется благодаря фоновым панелям текста, отображаемым за текстом. Это изменение уже появилось в Chromium и Microsoft Edge.

Тестирование высокой контрастности

Если вы хотите проверить, как ваш веб-сайт отображается в режиме высокой контрастности Windows, в Windows 10 вы можете перейти в «Настройки» > «Простота доступа» > «Высокая контрастность», а затем «Включить высокую контрастность». Переключение между парой разных тем даст вам более целостное представление о том, как ваш сайт отображается с выбранными пользователем цветами. Высокая контрастность Windows также может быть включена и выключена нажатием клавиш Alt + левый Shift + Print Screen.

Если вы обнаружите проблемы или у вас есть какие-либо отзывы, вы можете использовать кнопку обратной связи в приложении (или Alt+Shift+I) или сообщить о проблемах в рендеринге веб-контента с помощью средства отслеживания ошибок Chromium. Вы также можете связаться с нами в Твиттере.

Мы знаем, что не у всех разработчиков есть доступ к ПК или виртуальной машине Windows, поэтому мы работаем над функцией, которая позволит вам эмулировать высокую контрастность в Chromium DevTools. Мы рады сделать высококонтрастное тестирование Windows более эффективным для разработчиков, независимо от платформы вашей ОС.

Благодарим вас за тестирование веб-сайтов в режиме высокой контрастности Windows и за вклад в более доступную сеть для ваших пользователей!

— Мелани Ричардс, старший руководитель программы, Microsoft Edge

— Элисон Махер, инженер-программист, Microsoft Edge

Как создать простую циклическую анимацию фонового цвета с помощью CSS — Techstacker

Узнайте, как создать простой анимированный цикл фонового цвета с помощью чистого CSS с использованием ключевых кадров и различных свойств анимации CSS.

В этом примере мы нацеливаемся на элемент HTML непосредственно с помощью CSS, но вы можете применить следующий пример кода к любому элементу HTML, классу или идентификатору.

Код

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

Примечание: этот код не будет работать в IE9.

Планирование анимации

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

Сколько цветов фона мы хотим использовать?
Как долго должна длиться общая продолжительность анимации?
Какой тип анимации мы должны использовать?

Так как целью этого урока является простота, давайте использовать:

5 разных цветов фона
Продолжительность 10 секунд (каждый цвет отображается 2 секунды)
Линейная кривая анимации (анимация имеет одинаковую скорость от начала до конца)

Я использовал Coolers.co, чтобы быстро создать гармоничную цветовую палитру для этого примера:

Прямая ссылка на палитру Coolers

Это шестнадцатеричные цвета, через которые будет проходить наша будущая фоновая анимация:

оранжевый закат: #EE6055
средний аквамарин: #60D394
бледно-зеленый: #AAF683
нежно-желтый: #FFD97D
яркий мандарин: #FF9B85

Вам не нужно запоминать все эти названия (они взяты прямо из Coolers), я просто добавил их на всякий случай.

Хорошо, теперь у нас есть 5 цветов, которые мы собираемся добавить в зацикленную анимацию, которая отображает каждый цвет 2 секунды.

Далее мы создадим анимацию на основе нашего плана.

Создание зацикленной анимации CSS

В CSS ключевые кадры анимации работают в процентах от 0% до 100% . Добавьте в таблицу стилей следующие ключевые кадры CSS :

 /* Стандартный синтаксис */
@keyframes backgroundColorPalette {
  0% {
    фон: #ee6055;
  }
  25% {
    фон: #60d394;
  }
  50% {
    фон: #aaf683;
  }
  75% {
    фон: #ffd97d;
  }
  100% {
    фон: #ff9б85;
  }
}

Теперь у нас есть свойство ключевых кадров с именем backgroundColorPalette с 5 цветовыми интервалами, которые равномерно разделены от 0% до 100% анимации.

Теперь пришло время создать набор правил CSS для элемента body, чтобы мы могли взять цветовую палитру ключевых кадров и применить ее.

Добавьте следующие свойства анимации CSS в набор правил селектора тела и посмотрите, что произойдет в окне браузера:

 body {
  имя-анимации: backgroundColorPalette;
  продолжительность анимации: 10 с;
  количество итераций анимации: бесконечно;
  направление анимации: альтернативное;
}

Если вы все сделали правильно, теперь у вас должна быть непрерывно работающая анимация фонового цвета, которая плавно переходит от цвета к цвету с интервалом в 2 секунды.

Код

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

Как работает CSS

Сначала мы добавляем свойство animation-name и присваиваем ему значение backgroundColorPalette — теперь ключевые кадры цвета фона, которые мы создали ранее, назначаются элементу body.
Мы используем свойство animation-duration: и присваиваем ему значение 10 с — теперь общая продолжительность нашей анимации составляет 10 секунд.

Штирлиц — Сеть печатных салонов в Перми

Цвет заднего фона html: Как изменить цвет фона и текста веб-страницы?

html — Как убрать цвет заднего фона при скруглении

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

Отправить без регистрации

Отправить без регистрации

Как установить цвет фона для ячейки HTML-таблицы? — efim360.

Получение объекта ячейки

Получение свойства, отвечающего за графическое оформление

Получение свойства, отвечающего за цвет заднего фона для HTML-элемента

Обновление цвета ячейки таблицы при помощи JavaScript

Информационные ссылки

Стилизация для высокой контрастности Windows с новыми стандартами для принудительных цветов

Windows High Contrast

Новые стандарты для принудительных цветов

Prefers-Contrast

Скорректированные свойства CSS

Наследование цвета в простых SVG

Текстовые задние панели

Отличия от устаревших реализаций

Сравнение синтаксиса

Сравнение системных цветов

Различия в стилях агента пользователя (по умолчанию)

Поведенческие различия

Тестирование высокой контрастности

Как создать простую циклическую анимацию фонового цвета с помощью CSS — Techstacker

Код

Планирование анимации

Создание зацикленной анимации CSS

Код

Как работает CSS

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