我一直在尝试从上至下linear-gradient
来制作我正在制作的页面的背景。唯一的问题是页面上有页脚,我想在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 */
}
上下文中的页面在这里:http://bit.ly/1ar6KuR
非常感谢您可以提供的任何帮助:-)
最佳答案
为什么不反转渐变色停止并从顶部->底部到底部->顶部反转方向,并使第一个颜色停止在所需的像素值处。
Codepen Example
还是我想得太多?
关于html - CSS:在div结束之前的指定像素数后结束背景线性渐变,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19026576/