CSS 速记背景属性中的背景大小 (CSS3)

background-size in shorthand background property (CSS3)

提问by Mohsen

I'm trying to mix background-imageand background-sizeproperties in a shorthanded backgroundproperty. Based on W3C documentationbackground-sizeshould come after background-positionproperty separated with an slash(/).

我试图在一个人手不足的属性中混合background-image和background-size属性background。根据W3C 文档background-size，background-position属性应该在用斜杠 ( /)分隔之后出现。

W3C example:

W3C 示例：

p { background: url("chess.png") 40% / 10em gray
       round fixed border-box; } 

is equivalent to:

p {
    background-color: gray;
    background-position: 40% 50%;
    background-size: 10em 10em;
    background-repeat: round round;
    background-clip: border-box;
    background-origin: border-box;
    background-attachment: fixed;
    background-image: url(chess.png) }

p { background: url("chess.png") 40% / 10em gray
       round fixed border-box; } 

相当于：

p {
    background-color: gray;
    background-position: 40% 50%;
    background-size: 10em 10em;
    background-repeat: round round;
    background-clip: border-box;
    background-origin: border-box;
    background-attachment: fixed;
    background-image: url(chess.png) }

MDNsays same thing. I also found thisand thisarticle about shorthand CSS3 background property explaining this.

MDN说同样的话。我还发现this和this文章关于速记CSS3背景属性解释了这一点。

But this is not working! It also is not clear how to make a shorthand backgroundproperty when background-sizeand background-positionhave two different values for background-position-xand background-position-yor same thing for background-size. It's not clear how the slash(/) takes place? This exampleis not working in my Chrome 15.

但这不起作用！也不清楚如何background在background-size和background-position具有两个不同的值时创建简写属性background-position-x和background-position-y或相同的事物background-size。不清楚斜线（/）是如何发生的？这个例子在我的 Chrome 15 中不起作用。

Example I tried to make a shorthand is this CSS code:

我试图做一个速记的例子是这个 CSS 代码：

div {  
    background: url(http://www.placedog.com/125/125) 
        0 0 /  150px 100px 
        repeat no-repeat 
        fixed border-box padding-box blue;      
    height: 300px;
    width:360px;    
    border: 10px dashed magenta;  
}

A cleaner example

一个更干净的例子

This is working(JSFiddle)

这是有效的（JSFiddle）

 body{
        background-image:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png);
        background-position:200px 100px;
        background-size:600px 400px;
        background-repeat:no-repeat;
    }

This is not working(jsfiddle)

这不起作用（jsfiddle）

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px 100px/600px 400px no-repeat;
}

This is not working too(jsfiddle)

这也不起作用（jsfiddle）

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px/400px 100px/600px no-repeat;
}

采纳答案by Kraz

1. Your jsfiddle uses background-imageinstead of background
2. It seems to be a case of "not supported by this browser yet".

1. 你的 jsfiddle 使用background-image而不是background
2. 似乎是“此浏览器尚不支持”的情况。

This works in Opera : http://jsfiddle.net/ZNsbU/5/
But it doesn't work in FF5 nor IE8. (yay for outdated browsers :D )

这在 Opera 中有效：http: //jsfiddle.net/ZNsbU/5/
但它在 FF5 和 IE8 中都不起作用。（是的，对于过时的浏览器：D）

Code :

代码 ：

body {
  background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 200px / 600px 400px no-repeat;
}

You could do it like this :

你可以这样做：

body {
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 400px no-repeat;
    background-size:20px 20px
}

Which works in FF5 and Opera but not in IE8.

它适用于 FF5 和 Opera，但不适用于 IE8。

回答by vignesh

You can do as

你可以这样做

 body{
        background:url('equote.png'),url('equote.png');
        background-size:400px 100px,50px 50px;
    }

回答by Daniel

Just a note for reference: I was trying to do shorthand like so:

仅供参考：我试图像这样进行速记：

background: url('../images/sprite.png') -312px -234px / 355px auto no-repeat;

but iPhone Safari browsers weren't showing the image properly with a fixed position element. I didn't check with a non-fixed, because I'm lazy. I had to switch the css to what's below, being careful to put background-size afterthe background property. If you do them in reverse, the background reverts the background-size to the original size of the image. So generally I would avoid using the shorthand to set background-size.

但是 iPhone Safari 浏览器没有使用固定位置元素正确显示图像。我没有用非固定检查，因为我很懒。我不得不把CSS切换到什么如下，注意把背景大小后的background属性。如果反向执行它们，背景会将背景大小恢复为图像的原始大小。所以一般我会避免使用速记来设置背景大小。

background: url('../images/sprite.png') -312px -234px no-repeat;
background-size: 355px auto;

回答by MizoPro

try out like this

像这样尝试

body {
   background: #fff url("!--MIZO-PRO--!") no-repeat center 15px top 15px/100px;
     }


/* 100px is the background size */

回答by Moin Zaman

You will have to use vendor prefixes to support different browsers and therefore can't use it in shorthand.

您将不得不使用供应商前缀来支持不同的浏览器，因此不能速记。

body { 
? ? ? ? background: url(images/bg.jpg) no-repeat center center fixed; 
? ? ? ? -webkit-background-size: cover;
? ? ? ? -moz-background-size: cover;
? ? ? ? -o-background-size: cover;
? ? ? ? background-size: cover;
}