Css background color opacity: background-color — CSS: Cascading Style Sheets

Приравнивание цвета и прозрачности | Viget

Цвет и прозрачность обычно обрабатываются независимо друг от друга. Выберите цвет и установите его непрозрачность (или альфу, если хотите). Достаточно просто. Но как именно связаны цвет и непрозрачность?

Для целей этого поста давайте просто рассмотрим оттенки серого. Приложив немного дополнительных усилий, это обсуждение можно экстраполировать на все цвета.

Теоретически

В цветовых режимах RGB и HEX для цифровых экранов технически доступно 256 возможных оттенков серого, включая черный и белый. Однако, ограничиваясь только настройкой непрозрачности черного на белом фоне, 256 оттенков уменьшаются до 100, поскольку непрозрачность обычно представлена ​​в виде целого процентного пункта от 9.0009 0% от до 100% . Для справки, в конце этого поста приложена таблица, отображающая 100 оттенков серого в эквивалентную непрозрачность черного на белом фоне.

Учитывая белый фон и черное наложение с регулируемой непрозрачностью, вычисление выходного оттенка серого может показаться тривиальным. Например, 80% черный на белом соответствует серому 255 * 0,80 = 204 или RGB(204, 204, 204) . Однако все становится немного сложнее, когда имеешь дело с оттенками, отличными от белого фона и черного наложения. Связь цвета и прозрачности можно обобщить с помощью следующей формулы композитинга.

Target — это выходной серый цвет, background — это основной цвет, а overlay — это цвет, который нужно изменить, манипулируя его непрозрачностью.

На практике (пример 1)

Допустим, у вас есть черный логотип RGB(0,0,0) на белом фоне RGB(255,255,255) , и вы хотите сопоставить его с серым цветом из RGB(204,204,204) . Поскольку вы работаете с файлом изображения, самое простое управление, которое у вас есть, помимо редактирования изображения, — это изменение непрозрачности изображения.

Подстановка этих значений в приведенную выше формулу и определение непрозрачности дает (204 - 255) / (0 - 255) = 0,2 . Непрозрачность наложения черного изображения должна быть изменена на 20% , чтобы соответствовать целевому серому цвету.

На практике (пример 2)

Несколько иной подход к этому методу относится к случаям, когда черный логотип имеет белую заливку вокруг, и вы хотите установить это изображение в рамке на сером фоне. Поместите плоский черный цветной блок позади изображения и уменьшите непрозрачность наложенного изображения до 9.0009 80% как (204 - 0) / (244 - 0) = 0,8 .

Инструмент преобразования серого + непрозрачность

Приведенный ниже инструмент обобщает эти расчеты для всех оттенков серого. Укажите любые 3 из запрошенных значений для расчета оставшегося 4-го значения. Значения цвета должны быть целыми числами от 0 до 255 . Непрозрачность должна быть между 0% и 100% .

См. Pen ilEcu от Lance (@gutini) на CodePen.

Заключительные замечания

Важно учитывать, что округление влияет на эти вычисления. Теоретически 99% черный на белом соответствует цвету RGB(2,55, 2,55, 2,55) , но округляется до RGB(3,3,3) . Как правило, значения RGB округляются до ближайшего целого числа. (Теоретические расчеты, которые дают значения RGB ровно наполовину, такие как RGB(25,5,25,5,25,5) , округляются в меньшую сторону.) белые, кроме самих черно-белых. В таблице ниже они выделены синим цветом. Эти 4 серых — #333333 , #666666 , #999999 , #CCCCCC — когда-то были широко известны как веб-безопасные цвета.

Большое спасибо Томми Маршаллу за помощь в разработке инструмента преобразования. Исходники доступны на Codepen .

---

9 0108 (0,0,0) 901 06 9010 8 61% 90 108   9 0108 (148 148 148) 9 0097 90 108   9 0097 901 08 18 % 9 0108 (214 214 214)

	RGB	HEX	Непрозрачность ЧЕРНОГО на БЕЛОМ
	#000000	100%
	(3,3,3)	#303030	99%
	(5,5,5)	#505 050	98%
	(8,8, 8)	#808080	97%
	(10,10,10)	#0A0A0A	96%
	(13,13,13)	#0D0D0D	95%
	(15,15,15)	#0F0F0F	94%
	(18,18,18)	#121212	93%
	(20,20,20)	#141414	92%
	(23,23,23)	#171717	91%
	(25,25, 25)	#191919	90%
	(28, 28,28)	#1C1C1C	89%
	(31,31,31)	#1F1F1F	88%
901 09	(33,33,33)	#212121	87%
	(36,36,36)	#242424	86%
	(38,38,38)	#262626 901 09	85%
	(41,41,41)	#292929	84%
	(43,43,43)	#2B2B2B	83%
	(46,46,46)	#2E2E2E	82%
	(48,48 ,48)	#303030	81%
	(51,51,51)	#333333	80 %
	(54,54,54)	#363636	79%
	(56,56,56)	#383838	78%
	(59,59,59)	#3B3B3B	77% 9010 9
	(61,61,61)	#3D3D3D	76%
	(64,64,64)	#404040	75%
	( 66,66,66)	#424242	74%
	(69 ,69,69)	#454545	73%
	(71,71,71)	#474747	72%
90 109	(74,74,74)	#4A4A4A	71%
	(76,76,76)	#4C4C4C	70%
	(79,79,79)	#4F4F4F 901 09	69%
	(82,82,82)	#525252	68%
	(84,84,84)	#545454	67%
	(87,87,87) 901 09	#575757	66%
	(89,89 ,89)	#595959	65%
	(92,92,92)	#5C5C5C	64 %
	(94,94,94)	#5E5E5E	63%
	(97,97,97)	#616161	62%
	(99,99,99)	#636363
	(102,102,102)	#666666	60%
	(105,105,105)	#696969	59%
	(107,107,107)	#6B6B6B	58%
	(110,110,110)	#6E6E6E	57%
	(112,112,112)	#707070	56%
	(115 115 115)	#737373	55%
	(117,1 17 117)	#757575	54%
	(120,120,120)	#787878	53%
	(122 122 122)	#7A7A7A	52%
	(125 125 125)	#7D7D7D	51%
(127 127 127)	#7F7F7F	50%
	(130 130 130)	# 828282	49%
	(133 133 133)	#858585	48%
	(135 135 135)	#878787	47% 9	46% 8 (140 140 140)	#8C8C8C	45%
	(143 143 143)	#8F8F8F 901 09	44 %
	(145 145 145)	#919191	43%
	#949494	42%
	(150 150 150)	#969696	41%
	(153 153,15 3)	#999999	40%
	(156 156 156)	#9C9C9C	39%
	(158 158 158)	#9E9E9E	38%
	(161 ,161,161)	#A1A1A1	37%
	(163 163 163)	#A3A3A3	36%
	(166 166 166)	#A6A6A6	35%
	(168,168,168)	#A8A8A8	34%
	(171 171 171)	#ABABAB	33%
	(173 173 173)	#АДАДАД	32%
	(176 176 176)	#B0B0B0	31%
	(178 178 178)	#B2B2B2	30% 9 0109
	(181 181 181)	#B5B5B5	29%
	( 184 184 184 )	#B8B8B8	28%
	(186 186 186)	#BABABA	27% 9 0109
	(189 189 189)	#BDBDBD	26%
	(191,191,191)	#BFBFBF	25%
(194 194 194)	#C2C2C2	24%
	(196 196 196)	# C4C4C4	23%
	(199 199 199)	#C7C7C7	22%
	(201,201,201)	#C9C9C9	21%
	(204 204 204)	#CCCCCC	20%
	(2 07,207,207)	#CFCFCF	19%
	(209,209,209)	#D1D1D1
	(212 212 212)	#D4D4D4	17%
	#D6D6D6	16%
	(217,217,217)	#D9D9D9	15%
	(219,219,219)	#DBDBDB	14%
	(222,222,222)	#DEDEDE	13%
	(224 224 224)	#E0E0E0	12% ,227,227)	#E3E3E3	11%
	(229 229 229)	#E5E5E5	10%
	(232 232 232)	#E8E8E8	9%
	(235 235 235)	#EBEBEB	8%
	(237 237 237)	#EDEDED	7%
	(240 240 240)	#F0F0F0	6%
	(242 242 242)	#F2F2F2	5%
	(245 245 245)	#F5F5F5	4% 901 09
	(247 247 247)	#F7F7F7	3%
	(250 ,250,250 )	#FAFAFA	2%
	(252 252 252)	#FCFCFC	1%
	(255 255 255)	#FFFFFF	0%

Использование метода затухания в CSS LESS для применения непрозрачности к шестнадцатеричному цвету

Когда я определяю цвета в своих CSS (каскадных таблицах стилей), я использую HEX (шестнадцатеричные) значения. Как #FF0099. Для меня это знакомо, легко читать и рассуждать. Единственный раз, когда я когда-либо переключался с нотации HEX на нотацию RGB, это когда мне нужно добавить альфа-канал для непрозрачности. Однако недавно, слушая подкаст Syntax Podcast по CSS, Уэс Бос преподнес мне вкусный подарок: LESS — мой любимый препроцессор CSS — имеет метод fade(), который позволит мне применить непрозрачность к шестнадцатеричному значению, в результате чего в нотации RGBa. Это круто!

Запустите эту демонстрацию в моем проекте JavaScript Demos на GitHub.

Чтобы увидеть это в действии, я собрал крошечную демонстрацию Angular 4, которая визуализирует ряд «выцветших» блоков поверх изображения. В этом случае я использую Angular, потому что это легко в моей локальной настройке; но в использовании fade() нет ничего, что требует Angular — вам просто нужен какой-то конвейер, который будет обрабатывать ваши файлы LESS и генерировать файлы CSS. Вот моя разметка HTML:

 // Импорт основных сервисов angular. 
импортировать {Компонент} из "@angular/core";
@Компонент({
селектор: "мое-приложение",
styleUrls: [ "./app.component.less" ],
шаблон:
`
<дел>