12

我已经知道我的问题的解决方案，但我想知道为什么会这样。为什么背景会覆盖背景大小？请不要写关于交叉浏览的文章。

HTML

<div class="icon"></div>

CSS

.icon {
    height: 60px;
    width: 60px;
    background-size: 60px 60px;
    background: transparent url("icon.png") no-repeat 0 0;

}

演示

http://jsfiddle.net/K74sw/2/

解决方案

在下方插入background-size说明background

4

2 回答 2

19

background设置大小后重置图像位置。

原因是 'background' 属性是一个简写属性，用于在样式表的同一位置设置大多数背景属性。包括, background-size, 这是您之前尝试使用的。

编辑了新的 CSS 规范链接：https ://www.w3.org/TR/css-backgrounds-3/#background

你用

background-size: 60px 60px;

background: transparent url("icon.png") no-repeat 0 0;

翻译为：

background-size: 60px 60px;  /*You try to set bg-size*/

background-color: transparent ;
background-position: 0% 0%;
background-size: auto auto; /* it resets here */
background-repeat: no-repeat no-repeat;
background-clip: border-box;
background-origin: padding-box;
background-attachment: scroll;
background-image: url("icon.png");

所以你可以尝试使用单独的background-...设置

所以要么使用：

background-size: 100% 100%;
background-image: url("http://1.bp.blogspot.com/-T3EviK7nK1s/TzEq90xiJCI/AAAAAAAABCg/OMZsUBxuMf0/s400/smilelaughuy0.png");
background-repeat:no-repeat;
background-position:0 0;

http://jsfiddle.net/K74sw/9/

或者只是交换你的线路。

http://jsfiddle.net/K74sw/10/

于 2013-06-26T20:39:04.600 回答
8

background是一种 CSS “速记属性”，可以轻松地将多个关联的背景属性组合成一个声明（background-color、background-image、background-repeat、background-position等）。

因此，它会用默认值覆盖任何未在速记中直接指定的属性（据我所知......根据W3C 规范，您可以在之后background-size在background速记属性中指定，background-position但我没有对此进行测试，我不知道是什么浏览器目前对此提供支持，但我怀疑它不是很好）。据我了解，这是因为background速记隐式设置了它所代表的所有属性，而不仅仅是您指定的属性，因此在速记声明中未定义的任何属性都设置为其默认值。

要修复它：

1）将属性放在属性background-size之后background

2）将background-size属性声明放在​​更具体的选择器中，a.icon而不是.icon

3) 根本不使用background速记，而是使用各个属性来指定

于 2013-06-26T20:34:53.633 回答