我已经知道我的问题的解决方案,但我想知道为什么会这样.为什么背景会覆盖背景大小？请不要写关于交叉浏览.
- <div class="icon"></div>
CSS
- .icon {
- height: 60px;
- width: 60px;
- background-size: 60px 60px;
- background: transparent url("icon.png") no-repeat 0 0;
- }
DEMO
解
在背景下插入背景大小的说明
解决方法
设置尺寸后,背景会重置图像位置.
原因是因为’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-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;
或者只是换掉你的线.
