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

Question

我有以下代码：

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

我的意图是<span>会有浅红色，但我将红色与包装蓝混合在一起。
有没有简单的方法让这项工作符合我的预期？

Answer 1

您可以将span放在实际的span后面，但背景为白色。但是，它不是一个可持续的解决方案，你不应该使用rgba颜色来做到这一点。

Answer 2

由于使用了rgba(255,0,0,0.5);，您有一个导致半透明度的Alpha选项，您最好的选择是在没有alpha的情况下使用rgb(255,0,0);，或者选择将alpha设置为1 rgba(255,0,0,1);

Answer 3

保留另一个元素作为span的包装器。并给它背景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>

  

替代解决方案：

您可以将此颜色#ff8080提供给没有透明度的span。它会产生同样的效果。

Answer 4

最好的方法可能就是使用没有不透明度的颜色，除了你可以用白色背景包装材料包裹高光颜色......

＆＃13;

＆＃13;

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

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

.inner-wrap {
 background-color: #FFF;    
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

使用颜色选择器（link）。

设置RGB颜色，使用十六进制 OR 查找等效的不透明RGB值。

透明色将始终与您的背景融为一体。