背景覆盖背景大小 [英] background overwrites background-size

问题描述

我已经知道我的问题的解决方案，但我不知道为什么会发生这种情况。为什么背景会覆盖背景大小？
$ b

HTML

 < div class =icon>< / div> 
  

CSS

  .icon {
 height：60px; 
 width：60px; 
 background-size：60px 60px; 
 background：透明url（icon.png）no-repeat 0 0; 
 
 $ b  

DEMO

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

$ b

解决方案 插入 background-size 下面的指令 background

解决方案

之所以这样做，是因为''c code> background 会在设置大小后重置图片位置。背景'属性是一个速记属性，用于在样式表中的相同位置设置大多数背景属性。
也是 background-size ，这是您之前尝试使用的。

您可以使用

  background-size：60px 60px; 
 
背景：transparent url（icon.png）no-repeat 0 0; 
  

转换为：

  background-size：60px 60px; / *您尝试设置bg-size * / 
 
 background-color：transparent; 
 background-position：0％0％; 
 background-size：自动自动; / *重置此处* / 
背景重复：不重复不重复; 
 background-clip：border-box; 
 background-origin：padding-box; 
 background-attachment：scroll; 
 background-image：url（icon.png）; 
  

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








$ b $背景尺寸：100％100％;
background-image：url（http://1.bp.blogspot.com/-T3EviK7nK1s/TzEq90xiJCI/AAAAAAAABCg/OMZsUBxuMf0/s400/smilelaughuy0.png）;
背景重复：不重复;
background-position：0 0;

http：或者只是换行。

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

I already know the solution to my problem but I wonder why this is happening. Why background overwrites background-size? Please don't write about cross browsing.

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/

SOLUTION

Insert background-size instruction below background

解决方案

background resets the image-position after you set size.

The reason why is because the ‘background’ property is a shorthand property for setting most background properties at the same place in the style sheet. Also background-size, which is the one you tried to use before.

You use

background-size: 60px 60px;

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

Which translates to:

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"); 

So you can try using the seperate background-... settings

So either use:

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/

Or just swap your lines.

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

这篇关于背景覆盖背景大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！