Смешайте прозрачные цветные фоны двух элементов, уложенных друг на друга.

Question

Мне интересно, есть ли способ смешать два прозрачных цвета, наложенных поверх друг друга, для достижения заданного цвета.

У меня есть панель меню. Цвет фона панели rgb(0, 0, 0, 0.75). Логотип в левом верхнем углу имеет сплошной красный фон #9B0506. Вы можете проверить его в прямом эфире на http://www.phoenixwebdev.com.au/about-our-services/ecommerce/. Сайт находится в процессе разработки.

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

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

Так что для моей ситуации я ищу способ решения mystery transparent red colour укладываются на rgb(0, 0, 0, 0.75) укладываются на white = #9B0506

Я был читать о CSS смешивания на https://css-tricks.com/basics-css-blend-modes/. Однако это не делает то, о чем я говорю.

Answer 1

Основываясь на экспериментах, мне удалось получить точный цвет, используя rgba(163,0,2,.92). Нижеследующее демо создает коробку, заполненную цветами, уложенными друг на друга, давая #9B0506 в качестве общего цвета.

Кроме того, вам не нужно полагаться на свое зрение, чтобы проверить теоретические значения, бесплатные приложения, такие как ColorPic, и многие другие позволяют вам проверять пиксели на экране в реальном времени и получать их значения цвета HEX/RGB напрямую.

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

.a { z-index: 1; background: white } 
 
.b { z-index: 2; background: rgba(0,0,0,.75) } 
 
.c { z-index: 3; background: rgba(163,0,2,.92) } 
 

 
.a, .b, .c { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="a"></div> 
 
<div class="b"></div> 
 
<div class="c"></div>

---

По вашему желанию, я пытался воспроизвести цвет с более низким значением непрозрачности. Я обнаружил, что rgba(171,0,0,.85) очень близок к целевому цвету, и он имеет немного большую непрозрачность.На этом этапе я вполне уверен, что точный цвет не может быть достигнут ни с какой другой ценностью, кроме упомянутой ранее, но это должно быть достаточно близким приближением, что не будет большой разницы. Демо внизу имеет старый цвет и новый рядом друг с другом, с цветовым кодом, который они производят, написанным на каждой половине.

.a { z-index: 1; background: white } 
 
.b { z-index: 2; background: rgba(0,0,0,.75) } 
 
.c { z-index: 3; background: rgba(163,0,2,.92) } 
 
.d { z-index: 3; background: rgba(171,0,0,.85) } 
 

 
.a, .b, .c, .d { 
 
    position: absolute; 
 
    top: 0; 
 
    height: 100%; 
 
} 
 
.a, .b { 
 
    left: 0; 
 
    width: 100%; 
 
} 
 
.c, .d { 
 
    color: #fff; 
 
    font-size: 3em; 
 
    font-family: "Consolas", monospace; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 50%; 
 
} 
 
.c { left: 0 } 
 
.d { right: 0 }

<div class="a"></div> 
 
<div class="b"></div> 
 
<div class="c"><span>#9B0506</span></div> 
 
<div class="d"><span>#9B0A0A</span></div>

Answer 2

вы пробовали с градиентом на фоне

background: linear-gradient(direction, color-stop1, color- stop2, ...); 

Answer 3

Не уверен, если это возможно, чтобы вычислить его. Хотя мы можем это сделать, выполните следующие действия: D

Рассмотрим элемент холста A и элемент холста B. Пользователь может ввести цвет A (# 9B0506) и цвет B (rgb (0, 0, 0, 0,75)), затем js loop попробует каждый цвет (rgba) поверх цвета B til и выдает самое близкое соответствие цвету A.

Я постараюсь сделать программу в jsfiddle.

Answer 4

Прежде всего, это легче работать с цветами в RGBA, чем в гекса.

Итак, ваша просьба результат 9b0506 -> RGB (155, 5, 6)

Далее, формула для любого канала

(е * а) + (б * (1-а))

, где F является значением переднего плана, б фонового значения для канала

Применяя эту формулу в течение первых 2-х слоев, белых и черный с прозрачностью 0,75, дает

0 * 0,75 + (255 * 0,25) = 63

Таким образом, основание RGB (63, 63, 63)

Теперь, верхний слой может иметь любой альфа, что вы хотите ... Но для зеленого канала, ожидаемый результат равен 5, а вклад только базового слоя будет 63 * (1 - a). Таким образом, значение (1 -a), превышающее 0,08, будет способствовать увеличению зеленой шали более 5, что приведет к общему результату.

Поскольку значения не могут быть отрицательными, минимум alpha для результата (1 - 0,08) = 0,92.

Теперь мы можем вычислить значения RGB:

г = (155 - (63 * 0,08))/0,92 = 163

Ь = (6 - (63 * 0,08))/0,92 = 1

(зеленый канал, так как dicussed перед тем, 0)

Таким образом, результат RGBA (163, 0, 1, 0,92).

Если вы хотите более высокие прозрачные пленки, вам нужно уменьшить зеленые ограничения канала (или результат зеленого канала идет выше, или базовый цвет опускается ниже .. это будет достигнуто сделать черный слой имеет более высокая непрозрачность)