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或

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>

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

Answer 3

大家好:)我一直尝试png transparancy layering / css3渐变技术一段时间，并且在浏览器中这似乎是最可靠的：

background：url（images / bkgd1.png）top center repeat-x，url（images / bkgd2.png）右上方repeat-x，-moz-linear-gradient（顶部，＃F3F704 0％， #FFFFFF 100％）;
background：url（images / bkgd1.png）top center repeat-x，url（images / bkgd2.png）右上方repeat-x，-webkit-gradient（线性，左上角，左下角，颜色-stop（0％，＃F3F704），颜色停止（100％，＃FFFFFF））;

我希望这对任何人都有帮助，即使只有一个人，我今天整天都会笑脸：）

Answer 4

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

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

Answer 5

您可以将图标展平为渐变背景，这意味着您只需要设置背景图像。除此之外，我认为你将不得不在渐变式容器中放置一个标签（或带有图像背景的容器）。

使用CSS渐变时添加图像？

5 个答案: