使用css的手电筒效果

这就是我要做的：一个坚实的灰色背景，光线从页面中心开始，在顶部结束，形成一个半月食（即半月食），因此看起来好像有一个火炬从页面中心向上发光

我曾尝试使用SVG而不是css，因为我认为这可能更容易，但我遇到了一些问题。谁能给我指出正确的方向吗

编辑：以下是我试图实现的目标：

---

为什么不使用CSS渐变？在这里：

background: #f9f9f9;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmOWY5ZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjY2RjZGNkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #f9f9f9 0%, #cdcdcd 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f9f9f9), color-stop(100%,#cdcdcd));
background: -webkit-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -o-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -ms-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: radial-gradient(ellipse at center, #f9f9f9 0%,#cdcdcd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#cdcdcd',GradientType=1 );

然后添加一个

margintop:-50%CSS到具有背景的元素。我不建议这是body元素，因为它会变得有点凌乱，但是创建一个具有绝对定位的新元素，给它渐变代码和-50%的边距和
z-index:-1因此它将位于页面的所有其余部分下

祝你好运
 您可以使用
径向渐变
作为背景图像，如下所示：

html {
    background: #ccc;
    background: -moz-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
    background: -webkit-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
    background: -ms-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
    background: -o-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
    background: radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
    min-height: 100%;
}

这是通过将渐变中心放置在页面上方50%（请注意
-50%
第二个参数）并结合封面
大小
属性来实现的

您可以阅读更多有关CSS的信息

下面是一个示例：
我建议使用CSS3梯度生成器之一，如。在径向渐变上使用几个不同的颜色停止，您应该能够完成非常接近的任务

这里有一个我很快就整理好了：
你有没有研究过类似的问题？我知道它是webgl，但它有灯光效果。谢谢Jared，我会研究它的！您不需要添加不必要的元素，也不需要调整边距。你可以用
径向梯度做这一切。我欠你我的命。也谢谢你的参考资料。