Question

我有以下CSS代码：

background: rgba(0, 0, 0, 0.5) url(bg1.png) top left/auto 50em repeat, url(bg2.png) top left/50% 100% no-repeat;

根据this w3schools reference，我认为它的语法正确。

但是，Chrome和Firefox都不会显示应用div的任何背景信息。可能是什么问题？

Answer 1

根据Mozilla MDN：

使用CSS3，您可以将多个背景应用于元素。它们彼此叠加，您在顶部提供的第一个背景和背面列出的最后一个背景。只有最后一个背景可以包含背景颜色。

selector {
  background: url(bg1.png) top left/auto 50em repeat,
              rgba(0, 0, 0, 0.5) url(bg2.png) top left/50% 100% no-repeat;
}

Answer 2

尝试

background: rgba(0, 0, 0, 0.5) url('bg1.png') top left 50em repeat, url('bg2.png')