Цвета шестиугольника: числовое представление для "прозрачного"?

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

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

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

Ответ 1

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

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

background: transparent;

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

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

Вам нужны оба, чтобы заставить его работать в IE и всех других достойных браузерах.

Ответ 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 */
}

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

Ответ 3

HEXA - #RRGGBBAA

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

Я пока не уверен в поддержке браузера, но вы можете проверить DRAFT 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 цифры

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

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

Ответ 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 первых символа являются шестнадцатеричным значением для прозрачности, а шесть остальных - шестнадцатеричным.

Ответ 5

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

Ответ 6

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

Ответ 7

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

bgcolor=" "