如何获得背景颜色以缩放到窗口大小？-Java 学习之路

我的CSS页面上有一个渐变背景颜色 . 我已尝试过多种带有填充和边距的配置，但没有成功获得不同尺寸屏幕的颜色 . 它不是顶部，左侧或右侧的问题，只有底部 . 为了快速修复，我将身体的底部填充设置为10％ . 我宁愿这样做，以便背景颜色缩放以适合窗口大小 . 提前致谢！这是一个页面的链接，它实际上只发生在IE或完整的窗口 . http://jstrobel.sheridan-college.com/index.html

body {  
background: -webkit-gradient(linear, top, bottom, from(#003399), to(#6699cc));
background: -webkit-linear-gradient(#003399, #6699cc);
background: -moz-linear-gradient(#003399, #6699cc);
background: -ms-linear-gradient(#003399, #6699cc);
background: -o-linear-gradient(#003399, #6699cc);
background: linear-gradient(#003399, #6699cc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003399',  
    endColorstr='#6699cc');
zoom: 1;
    margin: 0;
    padding-top: 2%;
    padding-bottom: 3%;
 }
 #wrapper { margin: auto;
       width: 1060px; 
    min-width: 1060px;
   -webkit-box-shadow: 5px 5px 5px #1e1e1e;
   -moz-box-shadow: 5px 5px 5px #1e1e1e;
   -ms-box-shadow: 5px 5px 5px #1e1e1e;
   -o-box-shadow: 5px 5px 5px #1e1e1e;
   box-shadow: 5px 5px 5px #1e1e1e;
 }
 #container { background: #ffeeee;
     background: -webkit-gradient(linear, top, bottom, from(#ffeeee), to(#6699cc));
     background: -webkit-linear-gradient(#ffeeee, #6699cc);
     background: -moz-linear-gradient(top, #ffeeee, #6699cc);
     background: -ms-linear-gradient(#ffeeee, #6699cc);
     background: -o-linear-gradient(#ffeeee, #6699cc);
     background: linear-gradient(#ffeeee, #6699cc);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeee',   
         endColorstr='#6699cc');
     zoom: 1; 
     min-width: 1060px;
         font-family: Verdana, Arial, sans-serif

1 回答

添加： background-attachment: fixed; 到你的身体 .

The solution is:

html {
    background: -webkit-gradient(linear, top, bottom, from(#003399), to(#6699cc));
    background: -webkit-linear-gradient(#003399, #6699cc);
    background: -moz-linear-gradient(#003399, #6699cc);
    background: -ms-linear-gradient(#003399, #6699cc);
    background: -o-linear-gradient(#003399, #6699cc);
    background: linear-gradient(#003399, #6699cc);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003399',  
        endColorstr='#6699cc');
}

body {  
    background: -webkit-gradient(linear, top, bottom, from(#003399), to(#6699cc));
    background: -webkit-linear-gradient(#003399, #6699cc);
    background: -moz-linear-gradient(#003399, #6699cc);
    background: -ms-linear-gradient(#003399, #6699cc);
    background: -o-linear-gradient(#003399, #6699cc);
    background: linear-gradient(#003399, #6699cc);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003399',  
        endColorstr='#6699cc');
    zoom: 1;
    margin: 0;
    padding-top: 2%;
    padding-bottom: 3%;
    background-attachment: fixed;
 }
 #wrapper { 
    margin: auto;
    width: 1060px; 
    min-width: 1060px;
    -webkit-box-shadow: 5px 5px 5px #1e1e1e;
    -moz-box-shadow: 5px 5px 5px #1e1e1e;
    -ms-box-shadow: 5px 5px 5px #1e1e1e;
    -o-box-shadow: 5px 5px 5px #1e1e1e;
    box-shadow: 5px 5px 5px #1e1e1e;
 }
 #container { 
    background: #ffeeee;
    background: -webkit-gradient(linear, top, bottom, from(#ffeeee), to(#6699cc));
    background: -webkit-linear-gradient(#ffeeee, #6699cc);
    background: -moz-linear-gradient(top, #ffeeee, #6699cc);
    background: -ms-linear-gradient(#ffeeee, #6699cc);
    background: -o-linear-gradient(#ffeeee, #6699cc);
    background: linear-gradient(#ffeeee, #6699cc);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeee',   
         endColorstr='#6699cc');
    zoom: 1; 
    min-width: 1060px;
    font-family: Verdana, Arial, sans-serif;
  }

Edit: 并添加：

html, body {
     height: 100%;
}

演示：

回复于 2024-05-05T10:08:45+08:00

如何获得背景颜色以缩放到窗口大小？

1 回答

相关问题