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

我试图混合 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-size和 background-position对于 background-position-x和 background-position-y有两个不同的值，或者对于 background-size有相同的值，那么如何创建一个简写的 background属性也是不清楚的。不清楚斜线(/)是如何发生的？我的 Chrome15没有使用这个例子。

例如，我试图做一个简短的 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;
}

118425

小开

最佳答案

Jsfiddle 使用 background-image而不是 background
这似乎是一个“这个浏览器还不支持”的情况。

这在 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中工作。

小开

您必须使用厂商前缀来支持不同的浏览器，因此不能使用速记。

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 切换到下面，小心地将背景大小 < em > 在之后作为背景属性。如果你反过来做，背景会将背景大小还原为图像的原始大小。因此，通常我会避免使用速记来设置背景大小。

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