Question

我在这里回答这个问题：Use css gradient over background image

background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 59%, rgba(0,0,0,0.65) 100%), url('/img/fondo-home.jpg') no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(59%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))), url('/img/fondo-home.jpg') no-repeat;
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url('/img/fondo-home.jpg') no-repeat;
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url('/img/fondo-home.jpg') no-repeat;
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url('/img/fondo-home.jpg') no-repeat;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url('/img/fondo-home.jpg') no-repeat;

如果我使用上面的内容（我更改了网址），它会按预期工作。即我看到一个带有渐变和图像的列表。

但是，如果我更改原始代码，它给了我一个漂亮的蓝色渐变，没有图像：

background: -moz-linear-gradient(top,  #6daad3 0%, #396b9e 100%), url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6daad3), color-stop(100%,#396b9e)), url('/img/fondo-home.jpg') no-repeat;
background: -webkit-linear-gradient(top,  #6daad3 0%,#396b9e 100%), url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat;
background: -o-linear-gradient(top,  #6daad3 0%,#396b9e 100%), url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat;
background: -ms-linear-gradient(top,  #6daad3 0%,#396b9e 100%), url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat;
background: linear-gradient(to bottom,  #6daad3 0%,#396b9e 100%), url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat;
background-size: 80px;

我看到图片的空间和firefox调试器看到的是网址，但我看不到图片。

我看到的唯一区别是我在我的例子中使用Hex。

有什么想法吗？

MrWarby。

使用以下方法：

/* background: #6daad3; Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-moz-linear-gradient(top,  #6daad3 0%, #396b9e 100%); /* FF3.6+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-webkit-gradient(linear, left top, left bottom, color-stop(0%,#6daad3), color-stop(100%,#396b9e)); /* Chrome,Safari4+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-webkit-linear-gradient(top,  #6daad3 0%,#396b9e 100%); /* Chrome10+,Safari5.1+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-o-linear-gradient(top,  #6daad3 0%,#396b9e 100%); /* Opera 11.10+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-ms-linear-gradient(top,  #6daad3 0%,#396b9e 100%); /* IE10+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,linear-gradient(to bottom,  #6daad3 0%,#396b9e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6daad3', endColorstr='#396b9e',GradientType=0 ); /* IE6-8 */


background-size: 80px 80px;

Answer 1

来自W3C working draft on css gradients：

Given a color expressed as an rgba() 4-tuple, one can convert this to a premultiplied representation by multiplying the red, green, and blue components by the alpha component...

文档中未提及十六进制表示。也许并非所有浏览器都支持Hex值。

使用http://hex2rgba.devoth.com/或任何其他工具将您的颜色转换为rgba。

如果它不起作用，那么可能只是因为你在图像上应用不透明的颜色，这应该让它不可见......

<强> [编辑]

你确实非常在这里用不透明的颜色隐藏图像！

背景以css值文本的顺序呈现在另一个之下......所以图像是最后的，因此落后......

您可以通过在每个颜色停止处设置0到1之间的Alpha值来转换颜色并添加透明度。

Answer 2

原因在于RGBA＆＃34; a＆＃34;代表阿尔法。 Alpha通道允许您产生透明度。请注意，示例渐变中的最后一个值在第四个位置具有.65，这意味着它只有65％不透明。您的渐变以0％的完全不透明颜色开始，并以100％变为完全不透明的颜色，因此它们基本上覆盖整个图像。

Answer 3

show最后使用上面发布的代码使其工作。首先添加网址会使图像位于前面。

background-size：80px 80px;正确调整图像大小。

所以我能够将所有不透明度设置回1。

如果是Hex，CSS列表不起作用

3 个答案: