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

Question

我正在尝试将background-image 和background-size 属性混合在一个简写的background 属性中。基于W3C documentation 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 说同样的话。我还找到了 this 和 this 关于速记 CSS3 背景属性的文章来解释这一点。

但这不起作用！当background-size 和background-position 具有background-position-x 和background-position-y 的两个不同值或background-size 具有相同的值时，如何制作速记background 属性也不清楚。目前尚不清楚斜线（/）是如何发生的？ This example 在我的 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_com/images/srpr/logo3w.png);
        background-position:200px 100px;
        background-size:600px 400px;
        background-repeat:no-repeat;
    }

这不起作用 (jsfiddle)

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

这也不行(jsfiddle)

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

Answer 1

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

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

代码：

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

你可以这样做：

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

在 FF5 和 Opera 中有效，但在 IE8 中无效。

Answer 2

你可以这样做

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

Answer 3

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

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;

Answer 4

这样试试

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


/* 100px is the background size */

Answer 5

您必须使用供应商前缀来支持不同的浏览器，因此不能简写。

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