Question

所以我的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） - 如何使用像素（对于silverleaf）或background-size为该特定图像设置auto？我尝试使用background-size标记，但它会调整上面定义的所有背景。

Answer 1

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

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

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

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

background-size: 50px 80px, auto;

Answer 2

对于您使用方式的多个背景（简写），这里是语法：

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
}

Answer 3

试试这个：

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;

如何在CSS中设置背景图像大小？

3 个答案: