Question

我一直在尝试从上到下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

非常感谢您提供的任何帮助： - ）

Answer 1

为什么不反转渐变颜色停止并从顶部反转方向 - ＆gt;从下到下 - ＆gt;顶部，并使第一个颜色停在所需的像素值。

Codepen Example

或者我是否想过这个？

Answer 2

也许最好的方法是在伪类之前添加：并对其应用渐变，例如：

#wrapper:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    content: "";
    ... and background here ...
 }

或#wrapper中的DIV作为具有相同CSS设置的第一个孩子。

CSS：在div结束之前以指定的像素数结束背景线性渐变

2 个答案: