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

Question

我试图在一个缺乏财产的混合background-image和background-size属性background.基于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属性时background-size,并background-position有两个不同的值background-position-x,并background-position-y用于或同样的事情background-size.目前尚不清楚斜线(/)是如何发生的？此示例在我的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属性.如果反向执行,背景会将背景大小恢复为图像的原始大小.所以一般我会避免使用速记来设置背景大小.

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