如何防止透明背景色混合？解决span背景色与父容器蓝色叠加问题

嘿，这个问题我之前也碰到过！大概率是你的<span>背景没有完全屏蔽父容器的蓝色，或是颜色混合模式在搞鬼。给你几个简单直接的解决办法：

• 用不透明的浅红色实色替代半透明红色
  如果你的代码里用了带透明度的红色（比如rgba(255, 0, 0, 0.5)），那必然会和父容器的蓝色叠加出奇怪的混合色。直接换成纯浅红色的十六进制或RGB值就行，比如：

  span {
    background-color: #ffcccc; /* 柔和的浅红色 */
    /* 也可以用 background-color: rgb(255, 204, 204); */
  }
  

• 关闭颜色混合模式（如果开启过的话）
  要是父容器或者<span>本身设置了mix-blend-mode或background-blend-mode，这会强制颜色叠加混合。给<span>加上下面的属性就能恢复正常显示：

  span {
    mix-blend-mode: normal;
    background-blend-mode: normal;
  }
  

• 将设为行内块元素（可选）
  纯行内元素的背景有时只会覆盖文字区域，虽然这一般不会导致颜色叠加，但如果父容器有渐变或特殊背景样式，把<span>改成行内块能确保背景完全包裹内容：

  span {
    display: inline-block;
    background-color: #ffcccc;
  }
  

试试这几个方法，应该就能得到你想要的浅红色背景啦！

内容的提问来源于stack exchange，提问作者shoosh