html - 使用 CSS 渐变时添加图像？

Question

我正在尝试使用 CSS 渐变加上一个位于渐变之上的图标来创建一个按钮。我尝试了 2 种方法，但都失败了。

首先:

.btn {
    background: -webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F));
    background: url(../images/btn.png);
}

我早该知道那是行不通的!但我也听说过 CSS3 多背景图片，所以我尝试了一下。

第二个:

.btn {
        background: -webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F)), url(../images/btn.png);
    }

仍然没有用 :(。有什么办法可以实际做到这一点吗？在 <img> 中添加一个 <button> 标签？

Answer 1

只有 webkit 浏览器允许多个背景效果 (CSS3) ..一般来说你可以有一个渐变 OR 和图像但你不能同时拥有(目前)

你可以覆盖 2 个 div，并让最上面的图像是透明的 PNG 或类似的