преобразовать непрозрачный цвет в полупрозрачный цвет [режим наложения]

вопрос в области CSS.

Допустим, у меня есть непрозрачный цвет color= rgb(3, 169, 244)

как я могу использовать CSS mix-blend-mode или background-blend-mode для воздействия на альфа-канал и рисовать этот цвет в каком-то варианте прозрачности как background-color

спасибо всем, кто помогает


person pery mimon    schedule 26.01.2019    source источник
comment
Просто наклейте а, и вы получите свою альфу. color:rgba(3,169,244,.4)   -  person David    schedule 26.01.2019
comment
Я не думаю, что есть режим наложения, который уменьшает альфу.   -  person Temani Afif    schedule 26.01.2019
comment
@David, цвет передается с сервера. это может быть любой случайный цвет в любом формате   -  person pery mimon    schedule 26.01.2019
comment
@TemaniAfif, как много ты знаешь об этом?   -  person pery mimon    schedule 26.01.2019
comment
ну, возможно, не слишком много, но я знаю, как работает формула (подобно описанной здесь: w3 .org/TR/compositing-1/#blending), и если ни один из цветов не имеет непрозрачности, я не думаю, что вы можете закончить с цветом, у которого есть непрозрачность. но вы можете имитировать это, учитывая основной цвет фона, потому что, добавляя больше цвета фона к основному цвету, вы создадите иллюзию прозрачного цвета.   -  person Temani Afif    schedule 26.01.2019
comment
кстати, почему бы вам просто не применить opacity к цвету? Кажется, вы слишком усложняете простую вещь   -  person Temani Afif    schedule 26.01.2019
comment
@TemaniAfif хорошая ссылка. Я прочитаю это. в то же время я могу контролировать другие цвета, с которыми я хочу смешаться. поэтому второй цвет может быть наполовину непрозрачным, если это поможет. о способе не opacity или filter:opacity это влияет на все element не только на цвет   -  person pery mimon    schedule 26.01.2019
comment
как я думал, это проблема XY, вы можете преодолеть проблему непрозрачности, используя другую технику, например, используя псевдоэлемент, где вы применяете цвет и непрозрачность (например: stackoverflow.com/a/47831336/8620333 / stackoverflow.com/a/52851246/8620333 )   -  person Temani Afif    schedule 26.01.2019
comment
хорошее решение. может быть, это может помочь здесь и там. Я нашел еще одну работу с градиентом   -  person pery mimon    schedule 27.01.2019