【问题标题】:Opera 11.11, multiple backgrounds, gradients and modernizr issueOpera 11.11,多背景、渐变和现代化问题
【发布时间】:2011-08-04 13:37:44
【问题描述】:

我在多个背景方面遇到了一些奇怪的问题。我使用线性渐变、径向渐变和重复的 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 渐变功能。我就是不知道我做错了什么。

Look at my site please, and help!

【问题讨论】:

    标签: css opera modernizr background-image


    【解决方案1】:

    我想我可以提供一点帮助(只是遇到了同样的问题)...:

    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 中制作径向渐变。

    【讨论】:

    • 并且一旦您将径向渐变放入语句中,即使您有备用图片,它也会失败。我现在只是注释掉径向部分。我找到了一个链接,您可以在其中通过 SVG 创建它。发表在我的回答中
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-11-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多