css 如何禁止多个background样式叠加呢？

首先一点很明确：background 不是继承属性。

然后，你的动图产生的变化不能说明什么，我也可以给你举一个例子：

我取消了父元素的背景色，为什么会影响我的页面显示效果？在这个例子里，那怎么可能不影响，因为子元素的背景是透明的，自然就透出了一点父元素的背景色，父元素一变，呈现的效果也就变了。

回到你的图中来，除非你的 <span> 把整个 <header> 都挡住了，又或者 <header> 就看不见（特指 background），不然凭什么 <heander> 的属性一变，页面的效果不会跟着变呢。