html - CSS 背景不适用于 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 是 --> http://jsfiddle.net/dvyorL5p/

非常感谢! :D

最佳答案

你的 CSS 语句中有 3 个 -radial-gradient，只有第一个前面有 -moz，另外两个有 -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

关于html - CSS 背景不适用于 Firefox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25239542/

html - CSS 背景不适用于 Firefox

上一篇：css scale 在这个 div 上工作很奇怪

下一篇：html - 如何在页面中央放置一个大图像，然后在其中放置一个菜单？