Html CSS:在div结束之前的指定像素数处结束背景线性渐变
我一直在尝试一个从上到下的Html CSS:在div结束之前的指定像素数处结束背景线性渐变,html,css,Html,Css,我一直在尝试一个从上到下的线性渐变,作为我正在制作的页面的背景。唯一的问题是页面上有一个页脚,我想在div结束之前结束渐变 这在CSS中是可能的,还是应该更改HTML以创建一个在页脚开始之前结束的div?或者jQuery应该计算页脚开始的百分比吗 这些页面的长度都不同,因此以百分比结尾并不适用于所有页面。线性梯度是否可以结束,比如在div结束之前500px 我的代码在这里,包装器div扩展到页面的整个宽度 div#wrapper { background: #ffdf96; /* Old bro
线性渐变
,作为我正在制作的页面的背景。唯一的问题是页面上有一个页脚,我想在div结束之前结束渐变
这在CSS中是可能的,还是应该更改HTML以创建一个在页脚开始之前结束的div?或者jQuery应该计算页脚开始的百分比吗
这些页面的长度都不同,因此以百分比结尾并不适用于所有页面。线性梯度是否可以结束,比如在div结束之前500px
我的代码在这里,包装器div扩展到页面的整个宽度
div#wrapper {
background: #ffdf96; /* Old browsers */
background: -moz-linear-gradient(top, #ffdf96 0%, #a67f25 50%, #000 60%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdf96), color-stop(50%,#a67f25), color-stop(60%,#000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffdf96 0%,#a67f25 50%,#000 60%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffdf96 0%,#a67f25 50%,#000 60%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffdf96 0%,#a67f25 50%,#000 60%); /* IE10+ */
background: linear-gradient(to bottom, #ffdf96 0%,#a67f25 50%,#000 60%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdf96', endColorstr='#a67f25',GradientType=0 ); /* IE6-9 */
}
上下文中的页面如下所示:
非常感谢您提供的任何帮助:-)为什么不反转渐变色停止,并反转从顶部-->底部到底部-->顶部的方向,并在所需的像素值处设置第一个颜色停止
还是我想得太多了?也许最好的方法是在伪类之前添加:并对其应用梯度,如:
#wrapper:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60%;
content: "";
... and background here ...
}
或者将DIV inside#wrapper作为具有相同CSS设置的第一个孩子。谢谢您,这是一个很有帮助的想法。最后,我将渐变代码添加到
.wrapper holder
,并使用jQuery将此框的高度设置为正好高于所有页面上的页脚。