Her*_*aaf 13 html css background
我有一个跨浏览器的CSS渐变,例如:
#background {
background: #1E5799; /* old browsers */
background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */
}
但我需要它跨越整个页面的高度,而不仅仅是视口.换句话说,我需要将样式应用于与整个页面具有相同高度的元素,通常为body或html.
进一步的复杂化:
我也使用粘性页脚,这需要html并body设置为100%的高度.因此,将样式应用于它们会导致仅填充视口.
我甚至不确定我问的是否有可能,但任何帮助都会受到赞赏.
小智 8
html body {
min-height: 100%;
}
min-height即使页面可滚动,它也可以实现技巧,属性跨越总高度,但是height属性将活动视口的高度设置为100%.
这适用于跨浏览器!
基于Kyle的解决方案,以及粘性页脚的其他样式,以下是最终有效的解决方案:
.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -250px;
background: #1E5799; /* old browsers */
background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */ } /* corresponds to height of #footer */
#body-wrapper {
height: 100%;
width: 100%;
}
使用以下html:
<body>
<div id="body-wrapper">
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</div>
</body>
另一个选项是,如果希望渐变仅缩放到视口,但在滚动时保持渐变.因此,不是绘制文档整个高度的梯度,而是仅保留相对于可见的高度.(尝试一下,你会看到我说的)
background-attachment: fixed;