Opera 11.11，多种背景、渐变和现代化问题
我在多个背景上遇到了一些奇怪的问题。我使用线性渐变、径向渐变和重复的 gif 图片的组合来制作页面背景。 这是我分配给主容器的CSS（首先在主体内）：
background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,.8) 100%), -moz-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%), url("../img/bodyBackground.gif");
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(75%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.8))), -webkit-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%), url("../img/bodyBackground.gif");
background-image: -o-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%), -o-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%), url("../img/bodyBackground.gif");
background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%), -ms-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%), url("../img/bodyBackground.gif");
background-image: linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%), radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%), url("../img/bodyBackground.gif");
background-repeat: no-repeat, no-repeat, repeat;
我使用了 css3generator ，所以我几乎可以肯定渐变没问题。 接下来，我使用 Modernizr 为 ald 浏览器做后备。这种样式被分配给容器，如果它是nside .no-js，.no-multiplebgs或.no-cssgradients html：
background-image: url("../img/bodyBackground.gif")
所有浏览器似乎都能正常工作，IE9正确回退，但是opera...我在Opera 11.11中测试，并且它根本不显示背景。同时，modernizr 表示它具有多种背景和 CSS 渐变功能。我只是不知道我做错了什么。
I've got some strange problem around multiple backgrounds. I use a combination of linear gradient, radial gradient and a repeated gif picture to make the background for page.
Here is the css I assign to main container (first inside the body):
background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,.8) 100%), -moz-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%), url("../img/bodyBackground.gif");
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(75%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.8))), -webkit-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%), url("../img/bodyBackground.gif");
background-image: -o-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%), -o-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%), url("../img/bodyBackground.gif");
background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%), -ms-radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%), url("../img/bodyBackground.gif");
background-image: linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%), radial-gradient(95% 5%, circle farthest-side, rgba(255,255,255,.3) 0%,rgba(255,255,255,.0) 50%), url("../img/bodyBackground.gif");
background-repeat: no-repeat, no-repeat, repeat;
I used css3generator for it, so I'm almost sure that gradients are OK.
Next, I use modernizr to make a fallback for ald browsers. This style is assigned to the container, if it is nside .no-js, .no-multiplebgs or .no-cssgradients html:
background-image: url("../img/bodyBackground.gif")
All browsers seem to work perfectly, IE9 falls back correctly, but opera... I test in Opera 11.11, and it displays no background at all. Same time, modernizr says it has multiple backgrounds AND css gradients feature. I just can't find out what am I doing wrong.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我想我可以提供一点帮助（刚刚遇到了同样的问题）...：
Opera 目前只支持线性渐变（参见 这里，关于径向渐变的注释；2011 年 3 月）。为了让线性部分在你的例子中工作，你需要为不透明度0添加一个点，如下所示：
进入这个：
你可以像常规图像一样添加线性渐变作为背景图像，所以我想我们只需要等待径向渐变支持。
欢呼
编辑：试试这个链接，展示如何通过 SVG 在 Opera 中制作径向渐变。
I think I can help a little (just ran into the same problem)...:
Opera as of now only supports linear-gradients (see here, note on radial-gradients; Mar2011). To get the linear part working in your example you need to add a dot for opacity 0 like so:
into this:
You can add linear gradients as background images just like regular images, so I guess we will just have to wait for radial-gradient support.
Cheers
EDIT: Try this link showing how to make radial gradients in Opera via SVG.