Question

我正在尝试为文档body设置多个背景。为什么这段代码不起作用？

body
{
    background: url(../Images/StandardBackgroundPattern.png) repeat, url(../Images/StandardBackground.png) center center no-repeat;
    background-size: auto, cover;
}

此代码仅显示照片。没有任何模式可以在任何地方看到（但Dev Tools说已经加载了照片和模式）。

<小时/> ^{上述的预期效果是包括背景照片，居中并填充视口的宽度和高度，并在其上放置图案并在水平和垂直方向上重复。}

如果可能的话，最好避免使用多个div。

Answer 1

试试这样。它应该工作正常。

body {
background-image: url(first.png), url(second.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}

Answer 2

如果您使用background速记属性。你可以使用这种简写方法。

body{
background: url(first.png) center bottom no-repeat, url(second.png) left top no-repeat;
}

Answer 3

为什么这段代码不起作用？

因为这是一个语法错误。

最好避免为此使用多个div 可能的。

对不起。你必须以不可取的方式做到这一点。或者，拆分图像本身然后使用它。

身体上的多个背景，使用CSS

3 个答案: