【问题标题】:CSS: How to set up gradient background cross browser (only missing IE8 and IE9)CSS:如何设置渐变背景跨浏览器(只缺IE8和IE9)
【发布时间】:2015-09-03 03:57:49
【问题描述】:

我已经创建了自己的导航栏,并想为其设置一个简单的渐变背景颜色。

到目前为止,我有以下在较新的浏览器中可以正常工作,但我不确定我必须在此处添加什么以涵盖 IE8 和 IE9(我对旧版本不感兴趣)。

另外,我在搜索这个时遇到了filter: progid...。 谁能告诉我是否需要在此处添加此内容以及涵盖常见的浏览器或者我是否需要为此添加或更改任何其他内容
我想支持较新版本的 Chrome、Firefox、Opera 和 Safari + IE(包括 IE8 和 IE9)。

我的 CSS:

background: -moz-linear-gradient(top, #02b0fd 0%, #028dca 100%); /* Firefox */
background: -ms-linear-gradient(top, #02b0fd 0%, #028dca 100%); /* IE10 */  
background: -o-linear-gradient(top, #02b0fd 0%, #028dca 100%); /* Opera */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #02b0fd), color-stop(1, #028dca)); /* Webkit (Safari) */
background: -webkit-linear-gradient(top, #02b0fd 0%, #028dca 100%); /* Webkit (Chrome) */
background: linear-gradient(top, #02b0fd 0%, #028dca 100%);

提前非常感谢, 迈克

【问题讨论】:

    标签: css internet-explorer-8 internet-explorer-9 background-color linear-gradients


    【解决方案1】:

    滤镜:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0002b0fd', endColorstr='#028dca',GradientType=0);

    会给你IE6-9。

    使用:http://www.colorzilla.com/gradient-editor/

    【讨论】:

    • 非常感谢!其余的都可以吗?十六进制代码真的是 8 位吗?
    • 快速浏览一下,它看起来应该可以工作(我很确定你需要背景:尽管在其他人面前)。是的,十六进制代码考虑了不透明度。如果您最终遇到其他问题,我建议您使用该 colorzilla 资源。它非常有用!
    • 再次感谢 - 大帮助!一定会尝试 ColorZilla。
    • 最后一点:在实现这个之后,它看起来需要在所有旧浏览器支持的前面加上“背景:”,所以我在我的帖子中添加了它。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-02-13
    • 2013-11-12
    • 1970-01-01
    • 2011-10-10
    相关资源
    最近更新 更多