Index color css: color-index — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

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


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

3,840.В астрономии индекс цвета-это простое числовое выражение,определяющее цвет объекта,которое в случае звезды дает его температуру.Чем меньше индекс цвета,тем более голубой (или горячий)объект.И наоборот,чем больше индекс цвета,тем объект более красный (или более холодный).

Наиболее распространенным способом указания цветов в CSS является использование их шестнадцатеричных (или шестнадцатеричных)значений.На самом деле шестнадцатеричные значения-это просто другой способ представления значений RGB.Вместо трех чисел от 0 до 255 вы используете шесть шестнадцатеричных чисел.Шестнадцатеричные числа могут быть 0-9 и A-F.


color-index CSS функция СМИ может быть использована для проверки количества записей в таблице поиска цветов выходного устройства.

Syntax

Функция color-index указывается как значение <integer> , представляющее количество записей в поисковой таблице цветов устройства вывода. (Это значение равно нулю, если устройство не использует такую ​​таблицу.) Это функция диапазона, означающая, что вы также можете использовать варианты с префиксом min-color-index и max-color-index для запроса минимального и максимального значений соответственно .

Examples

Basic example

HTML
<p>This is a test.</p>
CSS
p {
  color: black;
}
@media (color-index) {
  p {
    color: red;
  }
}
@media (min-color-index: 15000) {
  p {
    color: #1475ef;
  }
}
Result

Custom stylesheet

Этот HTML будет применять специальную таблицу стилей для устройств,которые имеют как минимум 256 цветов.

<link rel="stylesheet" href="http://foo.bar.com/base.css" />
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/color-stylesheet.css" />

Specifications

Specification
Медиа-запросы, уровень 4
# color-index

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung Internet
color-index

29

79

No

No

16

8

4.4

29

No

16

8

2. 0

See also

  • Использование медиазапросов
  • @media

CSS

  • color

    Функция Color CSS Media может использоваться для проверки количества битов на компонент (красный,зеленый,синий)устройства вывода.

  • color-gamut

    Функция color-gamut CSS media может быть использована для проверки приблизительного диапазона цветов,поддерживаемых агентом пользователя и устройством вывода.

  • device-aspect-ratio

    Исправлено:Эта функция больше не рекомендуется.

  • device-height

    Исправлено:Эта функция больше не рекомендуется.

  • 1
  • …
  • 139
  • 140
  • 141
  • 142
  • 143
  • …
  • 857
  • Next

z-index ⚡️ HTML и CSS с примерами кода

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

Для позиционируемого контейнера свойство z-index определяет:

  • порядок наложения в текущем контексте наложения;
  • создаёт ли контейнер локальный контекст наложения.

Демо

Позиционирование
  • bottom
  • clear
  • display
  • float
  • left
  • position
  • right
  • top
  • z-index

Синтаксис

/* Значение - ключевое слово */
z-index: auto;
/* <целочисленные> значения */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Отрицательные значения понижают приоритет */
/* Глобальные значения */
z-index: inherit;
z-index: initial;
z-index: unset;

Значения

В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже. Допустимо использовать отрицательное значение.

Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент.

auto
Контейнер не будет создавать локального контекста наложения. Уровень контейнера в текущем контексте наложения такой же, как и у родительского.
<integer>
Целое число определяет уровень контейнера в текущем контексте наложения. Контейнер также будет создавать локальный контекст наложения, в котором его собственный уровень будет равен 0. Это значит, что значения z-index нижестоящих элементов не будут сравниваться с z-индексами элементов вне этого контейнера.

Значение по-умолчанию: auto

Применяется к позиционированным элементам

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

  • CSS Level 2 (Revision 1)

Пример

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Порядок карт</title>
    <style>
      .
 
 card {
        position: relative;
      }
      .three {
        top: 50px;
        left: 55px;
        z-index: 5;
      }
      .seven {
        left: -120px;
        top: 25px;
        z-index: 2;
      }
      .ace {
        left: -295px;
        z-index: 1;
      }
      .card:hover {
        z-index: 10;
      }
    </style>
  </head>
  <body>
    <img src="image/3.png" alt="3" />
    <img src="image/7.png" alt="7" />
    <img src="image/ace.png" alt="Туз" />
  </body>
</html>

index — CSS: Каскадные таблицы стилей

Функция мультимедиа color-index CSS может использоваться для проверки количества записей в таблице поиска цветов устройства вывода.

Синтаксис

Функция color-index задается как значение, представляющее количество записей в таблице поиска цветов устройства вывода. (Это значение равно нулю, если устройство не использует такую ​​таблицу.

) Это функция диапазона, что означает, что вы также можете использовать префикс 9.0003 min-color-index и max-color-index вариантов для запроса минимального и максимального значений соответственно.

Примеры

Базовый пример

HTML 
 
Это тест.
УСБ 
 р {
  черный цвет;
}
@media (индекс цвета) {
  п {
    красный цвет;
  }
}
@media (минимальный индекс цвета: 15000) {
  п {
    цвет: #1475ef;
  }
}
Результат

Пользовательская таблица стилей

Этот HTML-код будет применять специальную таблицу стилей для устройств, имеющих не менее 256 цветов.

Технические характеристики

Спецификация Статус Комментарий
Медиа-запросы уровня 4
Определение «индекса цвета» в этой спецификации. 		Кандидат в рекомендации Теперь значение может быть отрицательным, и в этом случае оно вычисляется как false.
Медиа-запросы
Определение «индекса цвета» в этой спецификации. 		Рекомендация Исходное определение. Значение должно быть неотрицательным.

Совместимость с браузером

Таблица совместимости на этой странице создана на основе структурированных данных. Если вы хотите внести свой вклад в данные, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос на включение.

Настольный Мобильный
Chrome Edge Firefox Internet Explorer Opera Safari Веб-просмотр Android Chrome для Android Firefox для Android Opera для Android Safari на iOS Samsung Internet
индекс цвета функция мультимедиа Chrome Полная поддержка 29 Край Полная поддержка 79 Firefox Без поддержки № ИЭ Без поддержки № Опера Полная поддержка 16 Сафари Полная поддержка 8 Веб-просмотр Android Полная поддержка ≤37 Chrome Android Полная поддержка 29 Firefox Android Без поддержки № Opera Android Полная поддержка 16 Сафари iOS Полная поддержка 8 Samsung Интернет Android Полная поддержка 2. 0

Легенда

Полная поддержка
Полная опора
Без поддержки
Без опоры

css — Как альтернативный цвет будет передавать каждые 4 элемента, чтобы повторить один и тот же шаблон компонента с функцией Array.map?

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

спросил

Изменено 1 год, 4 месяца назад

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

Я пытаюсь отправить своим дочерним компонентам в приложении реакции альтернативный цвет в качестве свойства, и я не совсем уверен, как это сделать. Цвет каждой Компонент CardSimpleRow должен чередоваться в 4 разных цветах, и как только появляется 4-й цвет, он возвращается, скажем, к началу цвета. Я хочу использовать карту, потому что моя матрица является динамической, и запись каждой строки матрицы для рендеринга кажется ненужной.

 экспорт const FollowScreen = () => {
  const alternatingColor = [["#d72226", "#a8232a"], ["#123", "#a33a"], ["#f3f3f3", "#a8232a"], ["#dd26", "#a8232a" ] ]
  возвращаться (
   <>
     {
       data.map((элементы, индекс) => {
          вернуть 
       })
     }
   
  )

Это градиент, поэтому мне нужно отправить 1-й массив, затем 2-й массив, затем 3-й, затем 4-й и после этого вернуться к 1-му массиву>

Пример, если их 8 CardSimpleRow , мне нужно 4 карты с массивом от 0 до 4, а затем остальные четыре с массивом от 0 до 4 снова

  • css
  • reactjs
  • react-native
  • colors

Если я правильно понял, вам нужно что-то вроде:

 чередующийся цвет[0]
чередующийся цвет[1]
чередующийся цвет[2]
чередующийся цвет[4]
чередующийся цвет[0]
чередующийся цвет[1]
.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *