如果使用十六进制，则CSS列表不起作用

user3193843 发表于 Dev

用户名

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调试器看到的是URL，但我没有看到图像。

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

有任何想法吗？

沃比先生。

使用以下方法工作：

/* 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;

Armel Larcier

从W3C关于CSS渐变的工作草案中：

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...

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

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

如果它不起作用，那可能是因为您要在图像上方应用不透明的颜色，这应该使其不可见...

[编辑]

实际上，您实际上确实非常隐藏具有不透明颜色的图像！

背景以css值文本的顺序一个接一个地渲染...因此图像是LAST，因此在后面...

您可以通过在每个色标处将Alpha值设置在0和1之间来转换颜色并增加透明度。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。