背景覆盖背景大小

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;

}

DEMO

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,等等).

因此它覆盖了速记中未直接指定的任何属性及其默认值(据我所知...根据W3C规范,您可以background-size在background简写属性中指定background-position但我没有测试过这个,我不知道是什么浏览器目前对此的支持,但我怀疑它不是很好).据我所知,这是因为background简写隐式设置它所代表的所有属性,而不仅仅是你指定的属性,因此任何未在速记声明中定义的属性都将设置为其默认值.

要修复它:

1)把background-size财产归属于background财产

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

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