html背景图url应用图标自适应元素宽高

html背景图url应用图标自适应元素宽高

       html元素中经常会通过background-image:url  应用图标作为背景图。

      但是图标默认不会自适应背景元素宽高：

     

      示例1：图片宽高小于背景元素宽高，背景图片重复覆盖背景。

     

       CSS代码：

.bgranking_04{    background: url("../images/common/ranking_04.png");}

      示例2：图片宽高小于背景元素宽高，背景图片不重复覆盖背景。

     

    

       CSS代码：

.bgranking_04{    background: url("../images/common/ranking_04.png") no-repeat;}

      示例3：图片宽高小于背景元素宽高，背景图片自适应背景图片宽高。

     

     

       CSS代码：

.bgranking_04{    background: url("../images/common/ranking_04.png") no-repeat;    background-size:100% 100%;    -moz-background-size:100% 100%;}