初始和url（）的多个背景图像

Question

在我的页面上，我想要在它们的左侧放置带有小图标的按钮，如下所示：

按钮背景应该是浏览器的默认值。

当我只指定背景图片时，initial背景图片会被覆盖。所以我认为指定多个背景图像可以解决问题：

background-image: initial, url("edit.png");
/* background-position .... */

但这不受支持;您无法在此上下文中使用initial（仅url()有效）。

有没有办法在不使用其他图像的情况下做到这一点？

Answer 1

以下是我如何实现您所追求的效果：

<button>Edit</button>

button:before {
    content: "";
    display: inline-block;
    background-image: url('http://placekitten.com/10/10');
    width: 10px;
    height: 10px;
    margin-right: 5px;
}

结果：

DEMO：http://jsfiddle.net/Q76ur/1/

这将允许您根据需要为按钮设置单独的背景图像。