背景-速记背景属性(CSS3)中的大小
我正在尝试在一个人手不足的background属性中混合使用background-image和background-size属性。基于，background-size应该出现在background-position属性之后，用斜杠分隔(/)。
W3C示例：
p{背景: url("chess.png") 40% / 10em灰色圆形固定边框；}
等同于：
P{背景颜色:灰色；背景位置:40%50%；背景大小: 10em 10em；背景重复:圆形；背景剪辑:边框；背景原点:边框；背景附件:固定；背景图片: url(chess.png) }
也是这么说的。我还找到了关于速记CSS3背景属性的this和this文章，解释了这一点。
但这不管用！当background-size和background-position对于background-position-x和background-position-y有两个不同的值，或者对于background-size有相同的值时，如何创建速记background属性也不清楚。目前还不清楚斜杠(/)是如何发生的？This example在我的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;
}回答 5
Stack Overflow用户
发布于 2011-10-23 13:45:40
- 你的jsfiddle使用
background-image而不是jsfiddle，这似乎是一个“还不被这个浏览器支持”的情况。
这在歌剧中有效：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中工作。
Stack Overflow用户
发布于 2013-09-12 03:15:42
您可以这样做
body{
background:url('equote.png'),url('equote.png');
background-size:400px 100px,50px 50px;
}Stack Overflow用户
发布于 2013-08-29 22:59:45
仅供参考:我正在尝试速记，如下所示：
background: url('../images/sprite.png') -312px -234px / 355px auto no-repeat;但是iPhone Safari浏览器不能正确显示带有固定位置元素的图像。我没有检查一个非固定的，因为我很懒。我不得不将背景切换为下面的样式，小心地将背景大小的背景放在背景属性之后。如果反转，背景会将背景大小恢复为图像的原始大小。因此，通常我会避免使用速记来设置背景大小。
background: url('../images/sprite.png') -312px -234px no-repeat;
background-size: 355px auto;https://stackoverflow.com/questions/7864448
复制相似问题