Question

我是CSS的新手。

我有以下CSS定义，在我的网页中显示一个图标。

.systemIcon{
    margin-right:2px;
    background:url(../images/tree/system.png?_v=001) no-repeat 0px 0px;
}

我想在右边添加另一个图标（比如说system2.png）。所以我尝试了以下内容：

.systemIcon{
    margin-right:2px;
    background:url(../images/tree/system.png?_v=001), url(../images/tree/system2.png?_v=001) no-repeat 0px 0px;
}

但结果是图标显示在另一个的 ON TOP 上。

有没有办法向他们展示并排？

Answer 1

为每张图片指定background-position和background-repeat：

span {
  display: inline-block;
  background-image: url('http://icons.iconarchive.com/icons/graphicloads/colorful-long-shadow/256/Home-icon.png'), url('http://icons.iconarchive.com/icons/kyo-tux/aeon/256/Sign-LogOff-icon.png');
  background-position: 0px 0px, 256px 0px;
  background-repeat: no-repeat, no-repeat;
  width: 512px;
  height: 256px;
}

<span></span>

Answer 2

如果您想要显示图标，也许您应该使用多个<img/> HTML标记。这似乎比background CSS属性更好。

使用CSS并排显示图标

2 个答案: