Question

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

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条指令

Answer 1

设置尺寸后，

background会重置图像位置。

之所以如此，是因为'background'属性是一个简写属性，用于在样式表中的同一位置设置大多数背景属性。还有background-size，这是您之前尝试使用的那个。

您使用

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/

Answer 2

background是一个CSS“速记属性”，可以轻松地将多个相关背景属性合并为一个声明（background-color，background-image，background-repeat，background-position，等等）。

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

要修复它：

1）在background属性

之后放置background-size属性

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

3）根本不要使用{{1}}简写，而是使用各个属性来指定

背景覆盖背景大小

2 个答案: