Question

有时身体比屏幕小，背景被裁剪。这就是为什么我想把这两个背景放在<html>元素中。我知道使用CSS3可以有一个具有两个背景的元素（一个跟随另一个），写成如下：

background: url('/images/mosaic.gif') no-repeat, url('/images/photo.png') no-repeat;

我的问题是，是否可以将2张图像叠加在一起？马赛克重复并在其上方照片不重复。我试过这样做，这不起作用：

background: url('/images/mosaic.gif') repeat, url('/images/photo.png') no-repeat;

Answer 1

是的，这是可能的，而且正是你写的方式。 See here for an illustration.

<div id='cont'></div>

#cont { 
    background: url(http://lorempixel.com/400/200/food/1/) center center no-repeat,
        url(http://lorempixel.com/400/200/food/2/) repeat; 
}

Answer 2

你可以在顶部使用图像并在底部使用颜色：

background:  URL(images/page_bg.jpg) top left repeat-x #7C8FF7;

是否可以在同一个元素上有两个背景？

2 个答案: