手电筒效果与CSS

Question

这是我正在尝试做的事情：一个坚实的灰色背景，从页面中心开始到顶部结束的半日食（即半日食），所以它看起来好像有一个火炬从页面中央向上照射。

我尝试过使用SVG代替css，因为我觉得它可能更容易，但我遇到了一些问题。有人能指出我正确的方向吗？

编辑：这是我想要实现的目标的图像：

Answer 1

您可以使用radial-gradient作为背景图片，如下所示：

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%第二个参数。）并结合封面size属性来实现。

您可以阅读有关CSS radial-gradient property at MDN的更多信息。

以下是一个示例：http://jsfiddle.net/kUFNV/4/

Answer 2

为什么不使用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 );

然后将margin-top: -50%; CSS添加到具有背景的元素中。我不建议这是body元素，因为它会有点混乱，但创建一个具有绝对定位的新元素，给它渐变代码和-50％边距和z-index: -1;所以它将是在页面的其余部分。

祝你好运！

Answer 3

我建议使用其中一个CSS3渐变生成器，例如this one。在径向渐变上有一些不同的颜色停止，你应该能够完成非常接近的事情。

这是我快速汇总的一个：http://jsfiddle.net/43k6F/