带有初始和 url() 的多个背景图像

【问题标题】：Multiple background images with initial and url()带有初始和 url() 的多个背景图像
【发布时间】：2014-03-10 17:37:02
【问题描述】：

在我的页面上，我希望在它们的左侧有带有小图标的按钮，如下所示：

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

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

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

但这不被支持；您不能在这种情况下使用initial（只有url() 有效）。

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

【问题讨论】：

标签： html css image button background

【解决方案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;
}

结果：

演示：http://jsfiddle.net/Q76ur/1/

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

【讨论】：

谢谢。这仅适用于<button>，对吧？有没有办法用<input type="submit">-tag 做到这一点？
我认为你不能在<input />s 上使用:before 或:after...stackoverflow.com/questions/2587669/…
没错，但我忘了你可以用<button type="submit">代替。