1

刚发现多重背景。我想知道如何将确定的属性仅应用于多个背景列表中的这些背景之一。您如何单独针对它？

下面是一个例子来说明：

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。

我怎样才能做到这一点？

4

1 回答 1

1

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

在此处输入图像描述

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

例如，在您的最后一个网址上使用下面的 /cover

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 尺寸似乎会影响彼此独立的每一层。

于 2013-04-24T14:50:48.603 回答