Шестнадцатеричные цвета: числовое представление для «прозрачного»?

Question

Я создаю веб-CMS, в которой пользователь может выбирать цвета для определенных элементов сайта. Я хотел бы преобразовать все значения цвета в шестнадцатеричное, чтобы избежать дальнейших хлопот форматирования («rgb (x, y, z)» или именованных цветов). Я нашел для этого хорошую библиотеку JS.

Единственное, что я не могу попасть в гекс, это "прозрачный". Я нуждаюсь в этом, когда явно объявляю элемент прозрачным, что по моему опыту может отличаться от не определения какого-либо значения вообще.

Кто-нибудь знает, можно ли превратить это в какую-то числовую форму? Придется ли мне настраивать все экземпляры обработки на прием шестнадцатеричных значений или «прозрачный»? Я не могу думать ни о каком другом.

Answer 1

HEXA - # RRGGBBAA

Существует относительно новый способ создания прозрачности, он называется HEXA (HEX + Alpha). Он занимает 8 цифр вместо 6. Последняя пара - альфа. Таким образом, шаблон пар - # RRGGBBAA . Также работает 4 цифры: # RGBA

В настоящее время я не уверен в поддержке его браузера, но вы можете проверить ПРОЕКТ Docs для получения дополнительной информации.

§ 4.2. Шестнадцатеричные обозначения RGB: # RRGGBB

Синтаксис <hex-color> - это <hash-token> токен , значение которого состоит из 3, 4, 6 или 8 шестнадцатеричных цифр . Другими словами, шестнадцатеричный цвет записывается как хэш-символ «#», за которым следует некоторое количество цифр 0-9 или букв a-f (регистр букв не имеет значения - #00ff00 идентичен #00FF00).

8 цифр

Первые 6 цифр интерпретируются идентично 6-значной записи. Последняя пара цифр, интерпретируемая как шестнадцатеричное число, указывает альфа-канал цвета, где 00 представляет полностью прозрачный цвет и ff представляет полностью непрозрачный цвет.

Пример 3
Другими словами, #0000ffcc представляет тот же цвет, что и rgba(0, 0, 100%, 80%) (слегка прозрачный синий).

4 цифры

Это более короткий вариант 8-значной записи, «расширенный» так же, как и 3-значная запись. Первая цифра, интерпретируемая как шестнадцатеричное число, указывает красный канал цвета, где 0 представляет минимальное значение, а f представляет максимальное. Следующие три цифры обозначают зеленый, синий и альфа-канал соответственно.

По большей части Chrome и Firefox начали поддерживать это:

Answer 2

Альфа-канал определяет значение прозрачности цвета, поэтому любой цвет прозрачен на 100%, если значение альфа равно 0. Обычно этот четырехканальный тип цвета известен как RGBA.

Вы можете указать RGBA в CSS следующим образом:

div {
    background: rgba(200, 54, 54, 0.5); /* 50% transparent */
}

Обратите внимание, что не все браузеры поддерживают RGBA, и в этом случае вы можете указать отступление :

div {
    background: rgb(200, 54, 54); /* fallback */
    background: rgba(200, 54, 54, 0.5); /* 50% transparent */
}

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

Answer 3

Прозрачность - это свойство вне самого цвета, также известное как alpha компонент. Вы не можете кодировать его как RGB.

Если вы хотите прозрачный фон, вы можете сделать это:

background: transparent;

Кроме того, я не знаю, может ли это быть полезным или нет, но вы можете установить свойство opacity:

.half{
  opacity: 0.5;
  filter: alpha(opacity=50);
}

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

Answer 4

Вы можете использовать эту таблицу преобразования: http://roselab.jhu.edu/~raj/MISC/hexdectxt.html

Например, если вы хотите прозрачность 60%, вы используете 3C (в шестнадцатеричном эквиваленте).

Это полезно для прозрачности градиента фона IE:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454)";

где startColorstr и endColorstr: 2 первых символа - это шестнадцатеричное значение для прозрачности, а шесть оставшихся - это шестнадцатеричный цвет.

Answer 5

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

Answer 6

Используйте следующий шестнадцатеричный код для прозрачного текста: # 00FFFF00

Answer 7

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

bgcolor=" "