关于多个背景,我遇到了一些奇怪的问题。我使用线性渐变、径向渐变和重复的 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 or .no-cssgradients html:
background-image: url("../img/bodyBackground.gif")
所有浏览器似乎都能完美运行,IE9 可以正常回退,但 Opera... 我在 Opera 11.11 中测试过,它根本不显示任何背景。同时,modernizr 表示它具有多个背景和 css 渐变功能。我只是不知道我做错了什么。
最佳答案
我想我能帮上一点忙(刚遇到同样的问题)...:
Opera 目前仅支持线性渐变(参见 here,关于径向渐变的注释;2011 年 3 月)。为了让线性部分在您的示例中工作,您需要为不透明度 0 添加一个点,如下所示:
-o-linear-gradient(top, rgba(0,0,0,0) 75%,rgba(0,0,0,.8) 100%),
进入这个:
-o-linear-gradient(top, rgba(0,0,0,.0) 75%,rgba(0,0,0,.8) 100%),
您可以像常规图像一样添加线性渐变作为背景图像,所以我想我们只需要等待径向渐变支持。
干杯
编辑:试试这个 link展示如何通过 SVG 在 Opera 中制作径向渐变。
关于css - Opera 11.11,多背景、渐变和 modernizr 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6942447/