带渐变叠加的CSS3背景-只在Firefox中使用渐变
我试图在背景图像上叠加CSS渐变。我已经在Firefox中使用了它,但在safari和chrome中,我只获得背景图像,没有渐变 (我使用生成渐变代码,然后在每行末尾添加url()) 更新:我的问题可能是webkit在图像后面显示渐变,而不是像我需要的那样在顶部显示,而firefox显示渐变带渐变叠加的CSS3背景-只在Firefox中使用渐变,firefox,css,webkit,Firefox,Css,Webkit,我试图在背景图像上叠加CSS渐变。我已经在Firefox中使用了它,但在safari和chrome中,我只获得背景图像,没有渐变 (我使用生成渐变代码,然后在每行末尾添加url()) 更新:我的问题可能是webkit在图像后面显示渐变,而不是像我需要的那样在顶部显示,而firefox显示渐变 background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(99, 130, 169, 0.7) 100%), url(app/bg.
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(99, 130, 169, 0.7) 100%), url(app/bg.jpg) no-repeat center center fixed; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 0, 0, 0)), color-stop(100%, rgba(99, 130, 169, 0.7))), url(app/bg.jpg) no-repeat center center fixed; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(0,0,0,0.16) 100%), url(app/bg.jpg) no-repeat center center fixed; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(99, 130, 169, 0.7) 100%), url(app/bg.jpg) no-repeat center center fixed; /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(99, 130, 169, 0.7) 100%), url(app/bg.jpg) no-repeat center center fixed; /* IE10+ */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%,rgba(99, 130, 169, 0.7) 100%), url(app/bg.jpg) no-repeat center center fixed; /* W3C */
我相信这里的问题来自CSS的排序
我建议在这种情况下使用速记法,它将使阅读和维护变得更加容易(并且解决了这个问题)。下面是一个工作示例(和一个演示:):
图像位于WebKit中渐变的后面。只是WebKit代码使用了另一种颜色,
rgba(0,0,0,0.16)
,这比其他浏览器使用的颜色更难识别,rgba(99130169,0.7)
你有什么要求阻止你只使用图像?公平的问题,也许我最终会这么做,但我尝试只使用一个灰度全屏背景图像,然后我可以完全改变使用不同颜色渐变叠加的颜色和外观…这在firefox中效果不错…谢谢-这似乎只显示渐变,而不是它后面的背景图像…谢谢-从我坐的地方,这在safari和chrome中不起作用!图像位于渐变的顶部,而不是后面。在firefox中仍然可以工作。你没有得到同样的答案吗?
.gradient-bg {
background-color: #1a82f7;
background-image: url(images/fallback-gradient.png);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);
background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);
background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
}
.foo {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(99, 130, 169, 0.7))), url('http://lorempixel.com/400/300/'); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, transparent, rgba(99,130,169,.7)), url('http://lorempixel.com/400/300/'); /* Chrome10+,Safari5.1+ */
background-image: -moz-linear-gradient(top, transparent, rgba(99,130,169,.7)), url('http://lorempixel.com/400/300/'); /* FF3.6+ */
background-image: -ms-linear-gradient(top, transparent, rgba(99,130,169,.7)), url('http://lorempixel.com/400/300/'); /* IE10+ */
background-image: -o-linear-gradient(top, transparent, rgba(99,130,169,.7)), url('http://lorempixel.com/400/300/'); /* Opera 11.10+ */
background-image: linear-gradient(to bottom, transparent, rgba(99,130,169,0.7)), url('http://lorempixel.com/400/300/'); /* W3C */
background-repeat: no-repeat;
background-position: 50% 50%;
background-attachment: fixed;
}