使用CSS渐变时添加图像？

Question

我正在尝试使用CSS Gradients创建一个按钮以及一个位于渐变之上的图标.我尝试了两种方法,两者都失败了.

第一:

.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或类似的