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

所以我有CSS代码如下：如何在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该特定图像，即使用像素（用于银叶）或auto？我试着用background-size标签，但它会调整上面定义的所有背景。

来源

2016-02-13 EndenDragon

无我有两个背景。一个是银叶，另一个是banner-1008444.jpg。 – EndenDragon

可能重复的[CSS3的背景 - 多个背景大小的属性]（http://stackoverflow.com/questions/16919890/css3-backgrounds-multiple-background-size-properties） – seahorsepip

@seahorsepip，我看了一下，但我不明白给出的答案。 – EndenDragon

的事情是，你已经在background属性指定的两个背景（用逗号隔开），所以你必须做同样的background-size得到他们的不同的值，当你在background-size它用于两个仅指定一个值图像，是明确的：

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

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

使用逗号分隔符，你在做background，因此，例如，这应该工作只要你想：

background-size: 50px 80px, auto;

来源

2016-02-13 02:32:22

阅读文档。他正在以一种错误的方式使用它，这是不同的，当你只是为所有背景设置一个值，并且当你指定用逗号分隔的两个值时。 –

完美！正是我需要的！非常详细的答案，帮了我很多！ :) – EndenDragon

试试这个：

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-13 02:32:58 Ferrrmolina

在这样多重背景使用的是（简写）这里是语法：

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-13 02:36:31 dippas

OP要求'背景大小'，而不是'背景位置' –

确定它的差不多早上3点在这里我一开始没有读得很好。我会尽快更新我的答案@MaciejKwas – dippas

这是*很*更好的+1 :)但是，考虑到一会儿它不会在FF sinse工作，据我所知，它不支持' [/ ]'notation，只是fyi –

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

回答

相关问题