html - 滚动超出顶部或底部时，操纵浏览器窗口的颜色 - Thinbug

滚动超出顶部或底部时，操纵浏览器窗口的颜色

时间：2015-10-28 10:27:12

标签： html css colors

当我使用触控板滚动时，工具栏和主窗口之间有一个白色间隙（在THIS IS TOP标题上方）。你可以在我附上的图片中看到它。只有当我使用触控板（而不是鼠标）滚动窗口底部的顶部或底部时，才会出现此间隙。如何在“正常”窗口之外设置该背景的颜色？

//当我不滚动时：

    @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>
    	<body>
    	<div id="top" class="grid_12"> <h1>THIS IS TOP</h1></div>
    	<div class="container_12 clearfix">
    		<div id="header" class="grid_12">
    			<h1>HUHUHUHU</h1>
    	  	</div>
    	  	<div id="comment1" class="grid_3">
    	  		<p>This is comment 1!</p>
    		</div>
    		<div id="comment2" class="grid_3">
    	  		<p>This is comment 2!</p>
    		</div>
    		<div id="comment3" class="grid_3">
    	  		<p>This is comment 3!</p>
    		</div>
    		<div id="comment4" class="grid_3">
    	  		<p>This is comment 4!</p>
    		</div>
    	
    	  	<div class="grid_4 image" >
    	  		<p id="image1">image1</p>
    	  	</div>	  	
    	  	<div class="grid_4 image">
    	  		<p id="image2">image2</p>
    	  	</div>
    	  	<div class="grid_4 image">
    	  		<p id="image3">image3</p>
    	  	</div>
    	  	
    	  	
    	  	<div id="underLeftImage" class="grid_4 text">
    	  		<p id="underLeftImageText">image3</p>
    	  	</div>
    	  		  	
    	  	<div id="underCenterImage" class="grid_4 text">
    	  		<p id="underCenterImageText">image3</p>
    	  	</div>	  	
    	  	<div id="underRightImage" class="grid_4 text">
    	  		<p id="underRightImageText">image3</p>
    	  	</div>
    	</div>
    	</body>
    </html>

1 个答案:

答案 0 :(得分：2)

在我的测试中（在此SO页面上使用Chrome浏览器中的CSS检查器），它基于background-color元素的body。

因此，对于页面顶部的绿色栏，您可以这样做：

body {
    background-color: green;
}

请注意，它不会继承背景图像，因此如果您希望背景渐变的幻觉继续，那么您需要找到背景图像最顶部像素的颜色并使用它。