将背景大小应用于多个背景的各个图层 [英] Apply background-size to individual layer of a multiple background

问题描述

刚刚发现了多个背景.我想知道如何将确定的属性仅应用于多个背景列表中的这些背景之一.您如何分别定位?

Just discovered multiple background. I would like to know how can you apply determined properties to only one of these backgrounds of your list of a multiple background. How can you target it individually?

这里是一个例子来说明:

Here is an example to illustrate:

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;

如您所见，这里有多个背景的列表，但是我想使这些元素之一以背景大小覆盖整个屏幕.当然，此代码将cover属性应用于所有图像.我希望将此Cover属性仅应用于最后一张图片:green-gra-bg/jpg.

As you can see there is a list of multiple backgrounds, but I would like to make one of these elements cover the whole screen with background-size. This code of course applies the cover property to all the images. I would like this cover property be applied only to the last picture: green-gra-bg/jpg.

我该怎么做?

推荐答案

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

I believe you can specify the size inline for each background url:

以下是链接: http://www.css3.info/preview/multiple-背景/

Here's the link: http://www.css3.info/preview/multiple-backgrounds/

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

so for example, use /cover below on your last url

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- handles-css3-multiple-background-images

for my own personal example I tested an example i found:
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大小似乎在影响彼此独立的每一层.

The 800px and 500px sizes I add appear to be affecting each layer independent from one another.

这篇关于将背景大小应用于多个背景的各个图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！