css3 background简写,background-size简写背景属性（CSS3）

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