我正在尝试在属性不足的属性中混合使用background-image和background-size属性background。基于W3C的文档 background-size应background-position以斜杠(/)分隔属性之后。
background-image
background-size
background
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) }
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) }
但这是行不通的!还不清楚如何background在background-size和分别background-position具有background-position-x和background-position-y或具有相同的值时使用简写属性background-size。尚不清楚slash(/)是如何发生的?在我的Chrome15中无法正常运行。
background-position-x
background-position-y
我试图简化的示例是此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; }
一个更清洁的例子
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; }
这不起作用
body{ background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px 100px/600px 400px no-repeat; }
这也行不通
body{ background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px/400px 100px/600px no-repeat; }
但在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中不起作用。