应用背景大小的倍数背景单独层(Apply background-size to individual

2019-09-27 17:25发布

刚发现多个背景。 我想知道你怎么可以申请决心属性只有你一个多背景的列表的这些背景之一。 你怎么能单独定位呢

这里是一个例子来说明:

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;

正如你可以看到有多种背景的名单,但我想就这些元素之一覆盖背景大小的整个屏幕。 当然,这段代码应用覆盖属性的所有图像。 我想这个盖物业仅适用于最后一个画面:绿色-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;
}

的800个像素和500像素大小我添加似乎影响各层彼此独立。



文章来源: Apply background-size to individual layer of a multiple background