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

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）或 auto 为该特定图片设置 background-size？我尝试使用 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-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;

Answer 3

对于您使用方式中的多个背景 (shorthand)，语法如下：

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
}

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

How do I set the background image size in CSS?

css

background-image

background-size