当使用CSS渐变时如何添加图片？

Question

我正在尝试使用CSS渐变和一个放在渐变上面的图标来创建按钮。我尝试了两种方法，但都失败了。

第一种方法：

.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> 中的方法？

- omnix

---

顺便提一下，任何以-webkit为前缀的东西并不是CSS3技术，而是苹果公司的“标准”，只能在Safari和Chrome浏览器中使用。以下链接展示了在所有浏览器中实现渐变效果的其他方法：http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/ - soutarm

是的，我知道，我使用了-moz- ie过滤器，但这只是一个快速的复制粘贴示例... - omnix

请查看这个问题，可能对您有用：https://dev59.com/P3E95IYBdhLWcg3wApBU - Strelok

Answer 1

只有 Webkit 浏览器支持多个背景效果（CSS3）.. 一般来说，您可以拥有一个渐变或图像，但两者都不行（目前还不行）。不过，您可以重叠 2 个 div 并使最上层的图像为透明 PNG 或类似格式。

- Scott Evernden

---

如果像这样使用<span><button> Hello </button> </span>，然后在CSS中使用带有PNG背景和渐变的按钮，那会起作用吗？ - omnix

Answer 2

我认为如果您将渐变和按钮放在同一张图片中，这样会更好并且更兼容。但如果在您的情况下不可行，您可以使用多个div来实现相同的效果：

<div style="width:256px; height:256px; background:-webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F));">
<div style="width:100%; height:100%; background:url('btn.png') "></div></div>

如果您使用我的参数，请确保更改我设置的宽度/高度参数。

- Kranu

Answer 3

大家好 :) 我已经尝试了一段时间的png透明层叠/css3渐变技术，跨浏览器来看，这似乎是最可靠的：

• background:url(images/bkgd1.png) top center repeat-x, url(images/bkgd2.png) top right repeat-x, -moz-linear-gradient(top, #F3F704 0%, #FFFFFF 100%);

• background:url(images/bkgd1.png) top center repeat-x, url(images/bkgd2.png) top right repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3F704), color-stop(100%,#FFFFFF));

我希望这能帮助到任何人，即使只有一个人，我今天也会一整天都很开心 :)

- Matt Hill

Answer 4

你应该使用第一个示例，但将行反转，以便图像在渐变之前应用。所有浏览器都会获得背景图片，但只有理解 -webkit-gradient 的浏览器才会使用渐变。其他浏览器将忽略它。

.btn {
  background: url(…);
  background: -webkit-gradient(…);
}

- Todd Yandell

Answer 5

你可以将图标放在渐变背景上，这样你只需要设置背景图片。除此之外，我认为你需要在渐变容器内部放置一个带有图像作为背景的标签（或容器）。

- soutarm