CSS背景不适用于Firefox

时间：2014-08-11 09:05:20

标签： html css google-chrome firefox

我想知道为什么这段代码在Chrome上运行但在Firefox上不起作用，我把-moz-前缀但我得到了相同的结果。

代码是：

HTML 

<body class="metal">

    <header>

        <a href="#">yup</a>

    </header>

</body>

CSS 

body{
    color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow-x: hidden;
    font-family: sans-serif;
}

header {
    position: fixed;
    text-align: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    margin: 0;
    padding: 0;
    transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -webkit-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
}

footer {
    position: fixed;
    text-align: center;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    line-height: 20px;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    font-size: 10px;
    padding: 0;
    opacity: .8;
}

.metal {
    background: -webkit-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
    background: -moz-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
    background: -ms-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
    background: -o-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
    background: radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
    background-size: 10px 10px, 10px 10px, 100% 100%;
    background-position: 1px 1px, 0px 0px, center center;
    top: 0;
}

button {
    background: -webkit-radial-gradient(  20%   0%,  10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%),                     -webkit-radial-gradient(  24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),                     -webkit-radial-gradient(   20%  20%, 20%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%),                     -webkit-radial-gradient( 10%  50%, 50%  10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),                    -webkit-repeating-radial-gradient(    50% 20%, 10% 10%, hsla(0,0%,  0%,0) 10%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 5.5%),                    -webkit-repeating-radial-gradient(    20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),                    -webkit-repeating-radial-gradient(    50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),                    -webkit-radial-gradient(    50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
    background: -moz-radial-gradient(  20%   0%,  10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%),                     -moz-radial-gradient(  24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),                     -moz-radial-gradient(   20%  20%, 20%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%),                     -moz-radial-gradient( 10%  50%, 50%  10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),                    -moz-repeating-radial-gradient(    50% 20%, 10% 10%, hsla(0,0%,  0%,0) 10%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 5.5%),                    -moz-repeating-radial-gradient(    20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),                    -moz-repeating-radial-gradient(    50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),                    -moz-radial-gradient(    50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
    background: -o-radial-gradient(  20%   0%,  10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%),                     radial-gradient(  24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),                     radial-gradient(   20%  20%, 20%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%),                     radial-gradient( 10%  50%, 50%  10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),                    repeatinggradient(    50% 20%, 10% 10%, hsla(0,0%,  0%,0) 10%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 5.5%),                    repeatinggradient(    20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),                    repeatinggradient(    50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),                    radial-gradient(    50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
    background: -ms-radial-gradient(  20%   0%,  10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%),                     radial-gradient(  24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),                     radial-gradient(   20%  20%, 20%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%),                     radial-gradient( 10%  50%, 50%  10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),                    repeatinggradient(    50% 20%, 10% 10%, hsla(0,0%,  0%,0) 10%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 5.5%),                    repeatinggradient(    20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),                    repeatinggradient(    50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),                    radial-gradient(    50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
    background: radial-gradient(  20%   0%,  10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%),                     radial-gradient(  24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),                     radial-gradient(   20%  20%, 20%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%),                     radial-gradient( 10%  50%, 50%  10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),                    repeatinggradient(    50% 20%, 10% 10%, hsla(0,0%,  0%,0) 10%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 5.5%),                    repeatinggradient(    20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),                    repeatinggradient(    50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),                    radial-gradient(    50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
}

jsfiddle是 - ＆gt; http://jsfiddle.net/dvyorL5p/

非常感谢！ ：d

2 个答案:

答案 0 :(得分：1)

CSS声明中有3 -radial-gradient，只有第一个-moz位于其前面，另外2个前面有-webkit。
所以改变：

background: -moz-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);

到

background: -moz-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -moz-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -moz-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);

Fiddle

答案 1 :(得分：1)

不要忘记为每个属性添加每个前缀。

background:
    -webkit-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%),
    -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%),
    -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
background:
    -moz-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%),
    -moz-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%),
    -moz-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
background:
    -ms-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%),
    -ms-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%),
    -ms-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
background:
    -o-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%),
    -o-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%),
    -o-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
background:
    radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%),
    radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%),
    radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);

按钮：

background:
    -webkit-radial-gradient(20% 0%, 10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(20% 20%, 20% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%),
    -webkit-radial-gradient(10% 50%, 50% 10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-repeating-radial-gradient(50% 20%, 10% 10%, hsla(0,0%, 0%,0) 10%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 5.5%),
    -webkit-repeating-radial-gradient(20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
    -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
    -webkit-radial-gradient(50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
background:
    -moz-radial-gradient(20% 0%, 10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%),
    -moz-radial-gradient(24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
    -moz-radial-gradient(20% 20%, 20% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%),
    -moz-radial-gradient(10% 50%, 50% 10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -moz-repeating-radial-gradient(50% 20%, 10% 10%, hsla(0,0%, 0%,0) 10%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 5.5%),
    -moz-repeating-radial-gradient(20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
    -moz-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
    -moz-radial-gradient(50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
background:
    -o-radial-gradient(20% 0%, 10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%),
    -o-radial-gradient(24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
    -o-radial-gradient(20% 20%, 20% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%),
    -o-radial-gradient(10% 50%, 50% 10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -o-repeating-radial-gradient(50% 20%, 10% 10%, hsla(0,0%, 0%,0) 10%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 5.5%),
    -o-repeating-radial-gradient(20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
    -o-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
    -o-radial-gradient(50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
background:
    -ms-radial-gradient(20% 0%, 10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%),
    -ms-radial-gradient(24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
    -ms-radial-gradient(20% 20%, 20% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%),
    -ms-radial-gradient(10% 50%, 50% 10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -ms-repeating-radial-gradient(50% 20%, 10% 10%, hsla(0,0%, 0%,0) 10%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 5.5%),
    -ms-repeating-radial-gradient(20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
    -ms-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
    -ms-radial-gradient(50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
background: radial-gradient(20% 0%, 10% 50%, hsla(0,0%,100%,.5) 0%,hsla(0,0%,100%,0) 100%),
    radial-gradient(24% 100%, 20% 30%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
    radial-gradient(20% 20%, 20% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,10%,80%,0) 100%),
    radial-gradient(10% 50%, 50% 10%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    repeating-radial-gradient(50% 20%, 10% 10%, hsla(0,0%, 0%,0) 10%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 5.5%),
    repeating-radial-gradient(20% 100%, 10% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
    repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
    radial-gradient(50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);

检查兼容性：

http://caniuse.com/css-repeating-gradients

http://caniuse.com/css-gradients

相关问题
最新问题