0

所以我的css代码如下：

.jumbobg {
    background: url('http://znc.mane-frame.com/static/silverleaf.png') fixed no-repeat, url('../img/banner-1008444.jpg') no-repeat, grey;
}

我想知道，对于第一张图片（silverleaf.png） - 我将如何background-size使用像素（对于 silverleaf）或auto？我尝试使用background-size标签，但它会调整上面定义的所有背景的大小。

4

3 回答 3

3

问题是您在background属性中指定了两个背景（用逗号分隔），因此您必须执行相同操作background-size才能获得它们的不同值，当您在其中指定一个值时background-size适用于两个图像，要清楚：

background-size: 50px 80px;- 这是一个值

background-size: 50px 80px, auto;- 这是两个值

像在 中一样使用逗号分隔符background，例如，这应该可以按您的意愿工作：

background-size: 50px 80px, auto;
于 2016-02-13T02:32:22.727 回答
3

对于您使用的多种背景（速记），语法如下：

background: [ <bg-layer> , ]* <final-bg-layer>

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}

<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>

所以考虑到这一点，这里是一个如何设置 background-size第一个背景的例子：

body {
  background: url(http://lorempixel.com/1200/900) repeat-x scroll 0 45px / auto 100%, url(http://lorempixel.com/1200/45) no-repeat scroll center 0 / 100% auto
}

于 2016-02-13T02:36:31.373 回答
1

尝试这个：

background-image: url('http://znc.mane-frame.com/static/silverleaf.png'), url(../img/banner-1008444.jpg);
background-repeat: repeat, no-repeat;
background-position: 0 0;
background-size: 350px 350px, cover;
于 2016-02-13T02:32:58.683 回答