img标签没有src属性，但有class属性给出一个随机显示

Question

我刚刚在stackoverflow中遇到一个问题，用户希望在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;
}

Answer 2

默认情况下，

背景重复设置为重复。你应该设置：

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

或：

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