将背景大小应用于多个背景的单个图层

Question

刚发现多个背景。我想知道如何将确定的属性仅应用于多个背景列表中的这些背景之一。你怎么能单独定位？

这是一个例子来说明：

body{
    background:
        url(images/small-group-bubbles.png) repeat-x fixed 10% 0,
        url(images/blur-bubble.png) repeat-x fixed -130% 0,
        url(images/big-bubble.png) repeat-x fixed 40% 0,
        url(images/green-gra-bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #87d677;

正如您所看到的，有一个包含多个背景的列表，但我想让其中一个元素覆盖整个屏幕的背景大小。此代码当然将封面属性应用于所有图像。我希望这个封面属性仅适用于最后一张图片：green-gra-bg / jpg。

我该怎么做？

Answer 1

我相信您可以为每个背景网址指定内联大小：

以下是链接：http://www.css3.info/preview/multiple-backgrounds/

例如，在您的上一个网址上使用/覆盖

body{
    background:
        url(images/small-group-bubbles.png) repeat-x fixed 10% 0,
        url(images/blur-bubble.png) repeat-x fixed -130% 0,
        url(images/big-bubble.png) repeat-x fixed 40% 0,
        url(images/green-gra-bg.jpg) no-repeat center/cover fixed;
    background-color: #87d677;
}

对于我个人的例子我测试了一个例子我发现：
http://www.netmagazine.com/tutorials/get-grips-css3-multiple-background-images

body {
    background: 
        url(imgs/cloud.png) top center/800px no-repeat, 
        url(imgs/clouds-scatter.png) -46% -330px/500px repeat-x, 
        url(imgs/hills.png) bottom center repeat-x, 
        url(imgs/peaks.png) bottom right repeat-x;
}

我添加的800px和500px尺寸似乎影响每个层彼此独立。