如何防止透明背景颜色混合？

Question

I have the following code:

 .wrapper { background-color: rgba(0,0,255,1.0); } .inner { background-color: rgba(255, 0, 0, 0.5); }

 <div class="wrapper">some text<span class="inner">other text</span></div>

My intention was that the <span> would have a light red color but instead I got red blended with the wrapper blue.
Is there any easy way to make this work as I expected?

Answer 1

you can put the same span just behind the actual span , but with a white background-color. However, it's not a sustainable solution, and you should not use rgba color to do that.

Answer 2

Due to the use of rgba(255,0,0,0.5); you have an alpha option which causes semi transparency, your best bet is to simply use rgb(255,0,0); without the alpha or optionally set your alpha to 1 rgba(255,0,0,1);

Answer 3

Keep another element that is a wrapper to your span . and give it background white .

 .wrapper { background-color: #5555ff; position: relative; padding: 20px; } .inner { background-color: rgba(255, 0, 0, 0.5); display:block; } .fake{ display:inline-block; background: #fff; }

 <div class="wrapper"> some text <div class="fake"> <span class="inner">other text</span> </div> </div>

Alternate solution:

You can give this color #ff8080 to your span which does not have transparency. It will give the same effect.

Answer 4

Best way is probably to just use a color without opacity, other than that you could just wrap the highlight color with a white background wrapper...

 .wrapper { background-color: rgba(0,0,255,1.0); } .inner { background-color: rgba(255, 0, 0, 0.5); } .inner-wrap { background-color: #FFF; }

 <div class="wrapper">some text<span class="inner-wrap"><span class="inner">other text</span></span></div>