Mix transparent color backgrounds of two elements stacked on top of each other.

Question

I am wondering if there is a way to combine the two transparent colors superimposed on eachother to achieve a given color.

I have a menu bar. Panel background color rgb(0, 0, 0, 0.75). The logo in the upper left corner has a solid red background #9B0506. You can check it live on http://www.phoenixwebdev.com.au/about-our-services/ecommerce/ . The site is under construction.

I want to make this red partially transparent, but to achieve the exact red color, if visually, if there is white color behind the menu bar. Transparent black color is behind red and will affect the color.

Is there a way to calculate the hexadecimal value of red to achieve this? I don’t even know how to achieve this with the help of one transparent object against a solid background, not to mention black complicating things. I can’t make out, because I'm blind. Even if I could have a mathematical solution pounce on me.

So, for my situation, I am looking for a solution method mystery transparent red colourlaid on rgb(0, 0, 0, 0.75), laid on white=#9B0506

I read about css blending at https://css-tricks.com/basics-css-blend-modes/ . However, this does not do what I am talking about.

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>

Hide result

---

. , 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>

Hide result

Answer 2

, rgba, hexa.

, : 9b0506 → rgb (155, 5, 6)

(f * a) + (b * (1-a))

f - , b

, 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.

r g b:

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

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

( , , 0)

, : rgba (163, 0, 1, 0,92).

, ( , ), , )

Answer 3

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

Answer 4

, . : D

A B. A (# 9B0506) B (rgb (0, 0, 0, 0,75)), js (rgba) B til A.

jsfiddle.