background-size简写背景属性（CSS3）
我正在尝试在短手background属性中混合background-image和background-size属性。 基于W3C文档 background-size应该在用斜线（ / ）分隔的background-position属性之后。
W3C例子：
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) }
MDN说同样的事情。 我也发现这个和这篇文章关于速记CSS3背景属性解释这一点。
但是这不行！ 当background-size和background-position对background-position-x和background-position-y有两个不同的值，或者对于background-size同样的东西时，如何做一个简写background属性也是不清楚的。 不清楚斜线（ / ）是如何发生的？ 此示例在我的Chrome 15中不起作用。
例子我试图做一个简写是这个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; }
一个更清晰的例子
这是工作 （ JSFiddle ）
body{ background-image:url(http://www.google.com/intl/en_comhttp://img.dovov.comsrpr/logo3w.png); background-position:200px 100px; background-size:600px 400px; background-repeat:no-repeat; }
这不工作 （ jsfiddle ）
body{ background:url(http://www.google.com/intl/en_comhttp://img.dovov.comsrpr/logo3w.png) 200px 100px/600px 400px no-repeat; }
这不工作 （ jsfiddle ）
body{ background:url(http://www.google.com/intl/en_comhttp://img.dovov.comsrpr/logo3w.png) 200px/400px 100px/600px no-repeat; }
- 你的jsfiddle使用
background-image而不是background - 这似乎是“这个浏览器还不支持”的情况。
这个歌剧的作品： http : //jsfiddle.net/ZNsbU/5/
但是在ff5和ie8中不起作用。 （耶为outdatted浏览器：D）
代码：
body { background:url(http://www.google.com/intl/en_comhttp://img.dovov.comsrpr/logo3w.png) 400px 200px / 600px 400px no-repeat; }
你可以这样做：
body { background:url(http://www.google.com/intl/en_comhttp://img.dovov.comsrpr/logo3w.png) 400px 400px no-repeat; background-size:20px 20px }
哪些工作在ff5，歌剧，但不是ie8。
你可以做
body{ background:url('equote.png'),url('equote.png'); background-size:400px 100px,50px 50px; }
只是一个参考的笔记：我试图做这样的速记：
background: url('..http://img.dovov.comsprite.png') -312px -234px / 355px auto no-repeat;
但iPhone的Safari浏览器没有正确显示图像与一个固定的位置元素。 我没有检查一个不固定的，因为我很懒。 我不得不将CSS切换到下面的内容，注意在背景属性之后放置背景大小。 如果反向操作，背景会将背景大小恢复为图像的原始大小。 所以通常我会避免使用简写来设置背景大小。
background: url('..http://img.dovov.comsprite.png') -312px -234px no-repeat; background-size: 355px auto;
试试这样
body { background: #fff url("!--MIZO-PRO--!") no-repeat center 15px top 15px/100px; } /* 100px is the background size */
您将不得不使用供应商前缀来支持不同的浏览器，因此不能简写。
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; }
