是否可以将线性渐变设置为视口外部的HTML元素部分?

时间:2017-01-14 07:13:08

标签: html css css3 background-image linear-gradients

是否可以将线性渐变设置为<html>元素的背景部分,该部分通常在屏幕外且在视口之外,但可以被带入查看&#34;通过尝试在4个方向中的任何一个方向滚动超过限制来暂时?

我正在尝试使视口外的颜色与我的网站颜色相匹配。这样,当用户位于页面顶部并尝试向上滚动时,在某些浏览器上,显示的空格(通常为白色)将与我的网站颜色匹配。

如果用户尝试滚动到底部,我想对网站底部做同样的事情。

如果我将元素的background-color设置为红色,则效果非常好,并且视口,顶部f页面,页面底部以及左侧和右侧的所有白色现在都将被绘制红色而不是默认白色。

问题是,我的页眉和页脚是不同的颜色,所以我需要使用线性渐变。当我使用渐变时,例如:

  background: -webkit-gradient(linear, left top, left bottom, from(#f8593a), to(#000));  

 background: linear-gradient(#f8593a, #000) no-repeat;

它根本没有出现。

我做错了什么,或者这根本不可能?

更新

Test Case jsFiddle

我能在jsFiddle中做到最好。 (PS:如果有人知道如何在没有jsFiddle面板的情况下创建这样的小提琴,那么可以测试实际的Chrome下拉,请建议。)

此示例与实时行为之间的区别在于,在示例中,您无法将iFrame窗口拖过其边界,从而显示出“视口外部分”。但是,这里的蓝色背景颜色应该代表相同的区域。可以看出,颜色在没有任何额外工作的情况下进入该区域,而线性渐变被视为图像并保持在某些范围内。

0 个答案:

没有答案