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

刚发现多个背景。我想知道如何将确定的属性应用于多个背景的列表中的这些背景之一。你怎么能个别针对它？将背景大小应用到多个背景的单个图层

下面是一个例子来说明：

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。

我该怎么做？

来源

2013-04-24 Daniel Ramirez-Escudero

感谢Dylan，答案非常简单。您可以通过更改每个图像的简写中的代码来调整每个图层。 – 2013-04-24 17:39:08

我相信你可以指定每个背景URL大小直列：

enter image description here

这里的链接：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像素大小我添加似乎影响各层彼此独立。

来源

2013-04-24 14:50:48

感谢您的理解。我没有得到的是CSS语法。当放置在中心和封面之间时，“\”究竟会做什么？它似乎工作，但我不明白为什么... – 2013-04-24 15:21:57

是的，这是奇怪的语法，我相信它只是速记。我在其他地方看到过这种情况，比如做字体样式时。有时你会看到类似的东西。字体：粗体斜体小写字母1em/1.5em verdana，无衬线字体 /让您更容易地将字体大小和行高度属性写在一起。 – 2013-04-24 15:25:44

即便如此，这是将覆盖应用于所有图像层。或者因为最后一张图片有一个封面属性，所有其余的图片都会继承它？如果你把它拿出来，回答有关符号“/”，它就不再起作用了。奇怪... – 2013-04-24 15:44:06

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

回答

相关问题