img标签给出了一个随机显示

Question

我只是遇到一个问题在计算器，其中用户想给HTML中的图标，而不是使用

<img src="smiley.gif" alt="Smiley face" width="42" height="42"> 

但是，使用类像

<img class="iconClass"> 

和CSS类是

.iconClass{ 
       background:url('smiley.gif')!important; 
      } 

我想这一点，但是这对我的作品，但奇怪的日就是说，图像正在重复，直到指定的宽度和高度。为什么会发生这种情况，以及如何解决这个问题？

Answer 1

背景重复是默认设置为重复。您应该设置：

.iconClass{ 
    background-repeat: no-repeat; 
} 

或：

.iconClass{ 
       background:url('smiley.gif')!important no-repeat; 
      } 

Answer 2

为什么会发生是因为背景是复合材料特性，其中包括背景颜色，背景图片，背景重复，背景，地位的原因，背景附件。这意味着，当您单独设置背景而不指定背景时 - 重复您只需覆盖先前定义的规则，它就会回落到默认值，这是重复的。要修复它，你应该明确提供它：

.iconClass{ 
    background-repeat: no-repeat; 
}