2015-11-07 4 views
3

В браузерах на Mac можно прокручивать верхнюю часть и вниз под элементом тела. В каждом случае содержимое защелкивает назад, но на мгновение (из-за импульса вашей прокрутки) вы можете увидеть немного цвета фона тела выше/ниже самого верхнего или нижнего содержимого страницы.Цвет фона при прокрутке над/под видовым экраном?

Цвет этого элемента отображается в цвете фонового цвета тела в Chrome/Safari/FF.

Можно ли установить другой цвет над и под окном просмотра? Например, белый сверху, черный ниже.

Я абсолютно уверен, что это просто не под контролем - как технически эта область находится за пределами области просмотра, но я бы хотел услышать, может ли кто-нибудь пролить свет для меня.

+1

Я был бы заинтересован в ответ на этот вопрос также , никогда не думал об этом раньше. –

ответ

0

Сортировка. Вы можете использовать фон градиента. Это технически все еще один фон, но другая его часть будет видна сверху и снизу.

Отрисовка фонового градиента будет удивительной из-за путаницы между <body> и <html> фоны, которые браузеры сохраняют для обратной совместимости. Вы должны указать <html> элемент height или min-height, в противном случае фоновый градиент будет использовать высоту <body>!

html { 
    background: linear-gradient(red, blue); // use color stops for hard edge 
    min-height: 100%; 
} 

И если вы хотите, чтобы покрыть его с другим цветом фона для содержимого страницы, ожидают бороться height:auto и сворачивания полей раздражали:

html { 
    background: linear-gradient(red, blue); 
    height: 100%; 
} 

body { 
    background: green; 
    height: 100%; 
    margin: 0; padding: 1em; 
} 
Смежные вопросы