Question

我正在尝试将全屏背景图像与重复背景图像结合使用，而不使用J查询。有可能吗？

这是我用来全屏显示图片的代码：

body {  
background: url(../img/bg1.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

但是现在我希望这与需要具有重复功能的.png图像背景完全重叠，原因很简单，.png包含的行会重新缩放并在某些屏幕尺寸上看起来很糟糕。

有什么想法吗？

已经尝试过：

为html提供背景和正文背景，它只会显示其中一个。

Answer 1

可以在一个标签上包含两个背景图像。

工作原理

可以使用以下任一方式指定多个背景图像   个人背景属性或背景速记属性。

这应该是Helpful resource，以帮助您入门。

的CSS：

body {
    background-image: url(http://www.wallcoo.com/paint/Chiplegal_vector_art/images/%5Bwallcoo.com%5D_vector_art_0seasons.jpg), url(http://nopgc.org/v2/images/body_bg.jpg);
    background-position: top center, center;
    background-repeat: no-repeat, repeat;
    width: 100%;
    height: 100%;
}

小提琴：Demo

Answer 2

请注意，如果需要，多个背景将不适用于ie8：

http://caniuse.com/multibackgrounds

这个答案适用于所有浏览器：

您必须为元素指定宽度和高度。

您可以在此处查看答案：http://jsfiddle.net/Rc38f/

HTML代码：

<html>
    <body>
        <div id="wrapper"></div>
    </body>
</html>

CSS代码：

html {
    width: 100%;
    height: 100%;
}

body {
    background-image: url('http://www.colourbox.com/preview/4632391-637684-seamless-small-white-flowers-pattern-background.jpg');
    background-repeat: repeat;
    width: 100%;
    height: 100%;
}

#wrapper {
    background: url('http://i.telegraph.co.uk/multimedia/archive/02403/Jonstockshooting_2403237b.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    width: 100%;
    height: 100%;
}

全屏背景图像结合全屏重复背景

2 个答案: