1. дома
  2. Вопрос и ответ
  3. CSS-фон не работает на Firefox

CSS-фон не работает на Firefox

2014-08-11 4 views
0

Мне интересно, почему этот код работает в Chrome, но он не будет работать в Firefox, я поставил -moz-префикс, но получаю тот же результат.CSS-фон не работает на Firefox

Код:

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

источник

2014-08-11 TakuyaMK

+0

Что бит не работает? В '.metal'? У вас есть 3 '-radial-gradient' в вашем фоновом режиме, только первый имеет' -moz' перед ним, другие 2 имеют '-webkit-' перед ним. – putvande

ответ

1

У вас есть 3 -radial-gradient в вашем описании CSS, только первый имеет -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

источник

2014-08-11 09:08:58 putvande

+0

Это работает, спасибо большое! : D – TakuyaMK

1

ли не забудьте положить каждого атрибута каждого preffix.

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

источник

2014-08-11 09:23:08 M1K1O

+0

Он тоже работает! Благодаря! Но, хотя он хорошо работает на Firefox, он не будет в Opera ... Почему? :( – TakuyaMK

Смежные вопросы

 Смежные вопросы