2015-10-28 5 views
0

Когда я прокручиваю с помощью трекпада, между панелью инструментов и основным окном отображается белый промежуток (над этим заголовком вверх). Вы можете видеть это в изображениях, которые я прикреплял. Этот пробел ТОЛЬКО появляется, когда я прокручиваю верхнюю или нижнюю часть в нижней части окна с помощью трекпада (а не мыши). Как установить цвет фона за пределы «нормального» окна?манипулировать цветом окна браузера при прокрутке вверху или внизу

enter image description here

// Когда я не прокручиваются:

enter image description here

@import url("960_12_col.css"); 
 
    
 
    #header{ 
 
    background-color: blue; 
 
    height: 400px; 
 
    margin-top: 80px; 
 
    margin-bottom: 30px; 
 
    color: white; 
 
    padding-left: 50px; 
 
    padding-top: 40px; 
 
    box-sizing: border-box; 
 
    } 
 
    .grid_4{ 
 
    /* 
 
    text-align: center; 
 
    background-color: red; 
 
    margin-top: 30px; 
 
    height: 250px; 
 
    border: 20px solid black; 
 
    box-sizing: border-box; 
 
    */ 
 
    
 
    } 
 
    .grid_3{ 
 
    padding:10px; 
 
    border: 5px solid black; 
 
    margin: 10px; 
 
    height: 140px; 
 
    box-sizing: border-box; 
 
    } 
 
    #comment1{ 
 
    text-align: left; 
 
    } 
 
    #comment2{ 
 
    text-align: center; 
 
    } 
 
    #comment3{ 
 
    text-align: center; 
 
    } 
 
    #comment4{ 
 
    text-align: right; 
 
    } 
 
    
 
    #leftImage{ 
 
    } 
 
    
 
    #centerImage{ 
 
    } 
 
    #rightImage{ 
 
    } 
 
    .image{ 
 
    text-align: center; 
 
    background-color: red; 
 
    margin-top: 30px; 
 
    height: 250px; 
 
    border: 20px solid black; 
 
    box-sizing: border-box; 
 
    
 
    } 
 
    .text{ 
 
    text-align: left; 
 
    background-color: #C6E2FF; 
 
    margin-top: 5px; 
 
    height: 50px; 
 
    border: 5px solid black; 
 
    box-sizing: border-box; 
 
    
 
    } 
 
    body{ 
 
    /* 
 
    background-image: url("images/kaktus2.jpg"); 
 
    background-repeat:repeat; 
 
    */ 
 
     
 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#66cccc), to(#336666)); 
 
    /* Safari 5.1+, Chrome 10+ */ 
 
    background-image: -webkit-linear-gradient(#336666, #66cccc); 
 
    background-attachment: fixed; 
 
    /* background-color: red; */ 
 
    
 
    } 
 
    
 
    #top{ 
 
    position:fixed; 
 
    /* 
 
    margin:0px; 
 
    */ 
 
    top:0px; 
 
    left:80px; 
 
    
 
    right:80px; 
 
    */ 
 
    text-align: center; 
 
    height: 80px; 
 
    background-color: magenta; 
 
    
 
    
 
    }
<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
    <!-- <link rel="stylesheet" type="text/css" href="css/960_12_col_rtl.css"> --> 
 
     <link href="css/custom.css" type="text/css" rel="stylesheet"> 
 
     </head> 
 
    \t <body> 
 
    \t <div id="top" class="grid_12"> <h1>THIS IS TOP</h1></div> 
 
    \t <div class="container_12 clearfix"> 
 
    \t \t <div id="header" class="grid_12"> 
 
    \t \t \t <h1>HUHUHUHU</h1> 
 
    \t \t </div> 
 
    \t \t <div id="comment1" class="grid_3"> 
 
    \t \t \t <p>This is comment 1!</p> 
 
    \t \t </div> 
 
    \t \t <div id="comment2" class="grid_3"> 
 
    \t \t \t <p>This is comment 2!</p> 
 
    \t \t </div> 
 
    \t \t <div id="comment3" class="grid_3"> 
 
    \t \t \t <p>This is comment 3!</p> 
 
    \t \t </div> 
 
    \t \t <div id="comment4" class="grid_3"> 
 
    \t \t \t <p>This is comment 4!</p> 
 
    \t \t </div> 
 
    \t 
 
    \t \t <div class="grid_4 image" > 
 
    \t \t \t <p id="image1">image1</p> 
 
    \t \t </div> \t \t 
 
    \t \t <div class="grid_4 image"> 
 
    \t \t \t <p id="image2">image2</p> 
 
    \t \t </div> 
 
    \t \t <div class="grid_4 image"> 
 
    \t \t \t <p id="image3">image3</p> 
 
    \t \t </div> 
 
    \t \t 
 
    \t \t 
 
    \t \t <div id="underLeftImage" class="grid_4 text"> 
 
    \t \t \t <p id="underLeftImageText">image3</p> 
 
    \t \t </div> 
 
    \t \t \t \t 
 
    \t \t <div id="underCenterImage" class="grid_4 text"> 
 
    \t \t \t <p id="underCenterImageText">image3</p> 
 
    \t \t </div> \t \t 
 
    \t \t <div id="underRightImage" class="grid_4 text"> 
 
    \t \t \t <p id="underRightImageText">image3</p> 
 
    \t \t </div> 
 
    \t </div> 
 
    \t </body> 
 
    </html>

+0

Умм .. вы можете показать нам, как вы это сделали? Какой-то код, чтобы мы могли узнать, где вам помочь? – Sinstein

+0

уверен, я добавил его к вопросу. Я новичок в htmland css. Могут ли веб-дизайнеры использовать онлайн-инструмент для совместного использования кода? Было бы проще прикрепить ссылку с кодом. – brumbrum

+0

Да. см. https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/. – Sinstein

ответ

1

В моих тестах (возиться с CSS инспектор в Chrome на этом SO), он основан на background-colorbody элемент.

Так что для зеленой полосы в верхней части страницы, вы могли бы сделать это:

body { 
    background-color: green; 
} 

Обратите внимание, что он не наследует фоновое изображение, так что если вы хотите иллюзию фонового градиента Затем вам нужно будет найти цвет верхнего пикселя вашего фонового изображения и использовать его.

+0

aa Я вижу. Это очень помогло! Найти rgb верхнего пикселя - легкая задача. Можно ли указать верхний фоновый цвет темным, а нижний - светло-зеленый? Это создаст бесшовный транситон. если я укажу только один цвет, скажем, darkgreen, чем внизу страницы, я получаю грубый переход. – brumbrum

+0

Использование только 'background-color'? Неа. Он принимает только одно значение. Вы можете * иметь некоторую удачу с использованием абсолютно позиционированного элемента ': before' (см. Http://stackoverflow.com/questions/6457406/can-i-apply-multiple-background-colors-with-css3), но я есть ощущение, что псевдоэлемент будет прокручиваться вместе с остальной частью документа, когда вы достигнете верхней/нижней части экрана, что означает, что решение не будет работать. Вам может потребоваться выбрать, какая часть экрана наиболее важна, чтобы иметь правильный цвет фона и работать с одним значением ... – MassivePenguin

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