In css3, you can set several backgrounds. How to set multiple background colors?

2 answers 2

Color is an opaque thing (CSS still does not understand the alpha channel for color. Only for the whole background). So you will not see anything new. To create a combination of colors, push several translucent images into the background, or create the desired combination on the fly, summing up the necessary array in a javascript (or PHP) according to a specific rule. For example:

//смешиваем два цвета r,g,b,a и R,G,B,A, где a - альфа канал. ax = 1 - (1 - a) * (1 - A) rx = r * a / ax + R * A * (1 - a) / ax gx = g * a / ax + G * A * (1 - a) / ax bx = b * a / ax + B * A * (1 - a) / ax

    It is strange to try to force the browser to mix colors when it can be done once by yourself. But with a special desire, you can:

     p { background: rgba(255,0,0,.5); height: 3em; } p + p { background: rgba(0,0,255,.5); } p + p + p { background: linear-gradient(to bottom, rgba(255,0,0,.5), rgba(255,0,0,.5)) rgba(0,0,255,.5); } 
     <p><p><p> 

     p { background: rgba(255,0,0,.5); height: 3em; } p + p { background: rgba(0,0,255,.5); } p + p + p { background: linear-gradient(to bottom, rgba(255,0,0,.5), rgba(255,0,0,.5)), linear-gradient(to bottom, rgba(0,255,0,.5), rgba(0,255,0,.5)); } 
     <p><p><p>