Question

我在多个背景下遇到了一些奇怪的问题。我使用线性渐变，径向渐变和重复的gif图片的组合来制作页面的背景。这是我分配给主容器的css（首先在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;

我使用了css3generator，所以我几乎可以肯定渐变是可以的。接下来，我使用modernizr为ald浏览器做一个后备。此样式将分配给容器，如果它是nside .no-js，.no-multiplebgs或.no-cssgradients html：

background-image: url("../img/bodyBackground.gif")

所有浏览器似乎都运行良好，IE9正确回归，但歌剧......我在Opera 11.11中测试，它根本没有显示任何背景。同时，modernizr表示它具有多个背景和css渐变功能。我只是无法找出我做错了什么。

Look at my site please, and help!

Answer 1

我想我可以帮一点（刚遇到同样的问题）......：

Opera目前仅支持线性渐变（参见here，关于径向渐变的注释; Mar2011）。要使线性部分在您的示例中工作，您需要为不透明度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中制作径向渐变。

Opera 11.11，多个背景，渐变和现代化问题

1 个答案: