速记背景属性中的背景大小（CSS3）

我试图在一个速记

背景
属性中混合
背景图像
和
背景大小
属性。基于
背景大小
应位于
背景位置
属性之后，并用斜杠（
/
）分隔

W3C示例：

相当于：

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) }

我也这么说。我还找到了一篇关于速记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;  
}

更清楚的例子
这是有效的（）

这不起作用（）

这不太管用

您的JSFIDLE使用
背景图像
而不是
背景
这似乎是“此浏览器尚不支持”的情况
这在歌剧中起作用：

但它在FF5和IE8中都不起作用。（适用于过时浏览器：D）

代码：
正文{
背景：url(http://www.google.com/intl/en_com/images/srpr/logo3w.png)400px 200px/600px 400px无重复；
}

你可以这样做：

正文{
背景：url(http://www.google.com/intl/en_com/images/srpr/logo3w.png)400px 400px无重复；
背景尺寸：20px 20px
}

它在FF5和Opera中工作，但在IE8中不工作。
您必须使用供应商前缀来支持不同的浏览器，因此不能在速记中使用它

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;
}

像这样尝试一下

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


/* 100px is the background size */

仅供参考：我试着这么做速记：

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

但是iPhone Safari浏览器没有使用固定位置元素正确显示图像。我没有检查一个非固定的，因为我很懒。我不得不将css切换到下面的内容，小心地将background size放在background属性之后。如果以相反的方式执行，背景会将背景大小还原为图像的原始大小。因此，通常我会避免使用速记来设置背景大小

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

你可以随心所欲

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

这是不对的。如果我不想支持旧浏览器，我就不必使用供应商前缀。该供应商前缀仍然有效，一些浏览器可能只是最近才放弃了它。你认为这不是浏览器支持问题吗？我只是想知道CSS3
background
的正确规范是什么？这是W3C定义的，与您的问题或我的代码示例中的完全相同。它只是还没有在所有浏览器中实现。它在Chrome Canary中不起作用。我不敢相信它还没有实现。这一部分的答案是：这似乎是一个“此浏览器还不支持”的案例。在Safari的Android 4.1.2股票浏览器软件上也一样，不支持背景大小速记！Safari不支持它！将背景大小与背景分开，以防Safari被它卡住！这是对我帮助最大的；我不知道可以用逗号分割背景大小声明，上面的每个url对应一个逗号。
body {
   background: #fff url("!--MIZO-PRO--!") no-repeat center 15px top 15px/100px;
     }


/* 100px is the background size */

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

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

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