Chrome和&之间的CSS3背景渐变问题火狐

时间:2012-04-23 18:56:55

标签: firefox google-chrome css3 safari

background: -moz-linear-gradient(45deg,  rgba(92,92,92,0.95) 0%,rgba(92,92,92,0.65) 45%,rgba(0,0,0,0.25) 45%,rgba(0,0,0,0.25) 47%,rgba(0,0,0,0) 47%);
background: -webkit-linear-gradient(45deg,  rgba(92,92,92,0.95) 0%,rgba(92,92,92,0.65) 45%,rgba(0,0,0,0.25) 45%,rgba(0,0,0,0.25) 47%,rgba(0,0,0,0) 47%);

这两行相同,但会产生不同的结果。你可以在这里看到生产的内容(http://www.eprize.com/what-we-do/#mobile)。在Chrome中,一个显示两个45度灰色垂直条纹,而在Firefox中,一个在整个图像上流血,而不是第二个垂直条纹。

我花了一些时间谷歌搜索但只找到了CSS3生成器的结果,这不是我想要的。有关让Firefox看起来像Safari和Safari的外观的任何帮助铬?

1 个答案:

答案 0 :(得分:0)

问题在于Firefox对所有色彩停止的起点和终点的坚持。最后和第五个颜色停止应该使渐变的其余部分透明,但没有。这是修复。

background: -moz-linear-gradient(45deg, rgba(92, 92, 92, 0.95) 0%, rgba(92, 92, 92, 0.65) 45%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.25) 47%, rgba(0, 0, 0, 0) 47%), rgba(0, 0, 0, 0) 100%);