椭圆形背景渐变

3
我希望在我的网页上重新创建这里显示的背景渐变。与简单的线性渐变不同,它无法通过重复使用(作为图像)来填充可变长度的区域。是否有人能够推荐一种实现所需效果的方法?
1个回答

3

几乎...我在Chrome中尝试了一下,它呈现为从顶部到底部的两个黑色条带。将位置从绝对改为相对可以解决问题,但是随着内容增长,渐变会向上滚动并离开页面。 - Jason
还要注意的是,每个角落都有两个微妙的渐变,只有在页面底部时才应该出现。 - Jason
成功了!我已经标记为已回答,但仍有一个小问题,如果解决了将会更完美。在垂直方向上指定渐变的位置百分比效果很好(始终在中心),但在水平方向上效果不佳,因为我的内容是固定宽度的div。是否有一种方法可以将该渐变相对于屏幕中心而不是左上角进行定位?例如,我想将其设置为中心-400像素。 - Jason
很抱歉,这个在跨浏览器上不起作用,因为 window.onmove 处理程序只存在于 IE 中 :( - Alexander Pavlov
糟糕!你有没有看到用图像来实现这个的简洁方法?我在想,也许可以使用三个绝对定位的div(顶部、中间、底部),高度固定,宽度为100%。中间的div可以设置一个径向渐变的背景图像,并且我应该能够通过top和margin属性将其相对于中心位置进行定位。最后,设置z-order属性使其位于内容的后面。你有什么想法? - Jason
显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接