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

【问题标题】：How do I set the background image size in CSS?如何在 CSS 中设置背景图像大小？
【发布时间】：2016-02-13 02:28:27
【问题描述】：

所以我的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）或 auto 为该特定图片设置 background-size？我尝试使用background-size 标签，但它会调整上面定义的所有背景的大小。

【问题讨论】：

不，我有两个背景。一个是silverleaf，另一个是banner-1008444.jpg。
CSS3 Backgrounds - multiple background-size properties的可能重复
@seahorsepip，我看过了，但我不明白给出的答案。
这是相同的代码，只是相反，他只想调整第二张图片而不是第一张图片的大小。
@seahorsepip 不是这样，我没有得到cover 所做的事情，而且答案还不够清楚。它没有解释昏迷的用法等。

标签： css background-image background-size

【解决方案1】：

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

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

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

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

background-size: 50px 80px, auto;

【讨论】：

阅读文档。他以错误的方式使用它，这是不同的，当你只为所有背景设置一个值时，当你指定两个用逗号分隔的值时。
完美！正是我需要的！很详细的回答，对我帮助很大！ :)

【解决方案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
}

【讨论】：

OP 要求background-size，而不是background-position
好吧，这里快凌晨 3 点了，一开始我没好好阅读，。我会尽快更新我的答案@MaciejKwas
那 much 更好+1 :) 但是，请考虑一下，据我所知，它暂时不会在 FF 中工作，它不会支持<bg-position> [ / <bg-size> ] 符号，仅供参考
它支持，我用的是FF，在我的项目中使用了很长时间；）
哦 - 我检查过，他们确实做到了，很抱歉造成混淆 :)

【解决方案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;

【讨论】：