css - 带有 css 的手电筒效果

Question

这就是我想要做的：一个纯灰色的背景，从页面中心开始到顶部结束的半日食（即半日食）光，所以看起来好像有一个火炬向上闪耀从页面的中心。

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

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

Answer 1

You can use a radial-gradient as the background image like this:

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%;
}

This works by placing the center of the gradient 50% above the page (note the -50% second parameter.) combined with the cover size attribute.

You can read more about the CSS radial-gradient property at MDN.

Here is an example: http://jsfiddle.net/kUFNV/4/

Answer 2

我建议使用像这样的 CSS3 渐变生成器之一。在径向渐变上使用几个不同的色标，您应该能够完成一些非常接近的事情。

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

Answer 3

Why not use a CSS gradient? Here:

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 );

Then add a margin-top: -50%; CSS to the element with the background. I don't suggest this is the body element as it'll get a bit messy, but create a new element with absolute positioning, give it the gradient code and the -50% margin and z-index: -1; so it'll be under all the rest of the page.

Good luck!