2013-07-08 4 views
0

Я нашел противоположный результат в Firefox и Chrome при рендеринге градиентного фона со смещением.Замещение фонового положения снизу: противоположное поведение в Chrome и Firefox

Вот мой CSS код:

html 
{ 
    background:linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(255,255,255,0) 8%); 
    background-position: center top 30px; 
} 

body 
{ 
    background:linear-gradient(to bottom, rgba(255,255,255,0) 92%,rgba(245,245,245,1) 100%); 
    background-position: center bottom 100px; 
} 

Идея заключается в том, чтобы применить своего рода «Раздвижные двери» на фоне применения 2 противоположному градиента на HTML и тела элементов.

Проблема возникает, когда я устанавливаю нижнее смещение в теге тела: Firefox преобразуется с положительными значениями, а Chrome переводится с отрицательными значениями (или снизу с положительным). Таким образом, два основных браузера имеют противоположное поведение.

Как это решить?

+0

Я не думаю, что это хорошая идея стиля '' html' и body'. Я бы использовал два 'div' и применял к ним градиент. – otinanai

+0

Это не очень редкое решение .... документировано на многих сайтах ... ;-) –

+0

Можете ли вы указать на тестовый тест, показывающий вашу проблему? Я попробовал это локально, и для обоих браузеров положительные значения для смещения от нижнего среднего перевода (что и требует спецификатор). –

ответ

0

Я нашел решение для Chrome!

Достаточно добавить

background-repeat:no-repeat; 

для тега BODY декларации CSS, как показано в этом updated JsFiddle:

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