html - 中心a 1 :1 radial background

Question

我正在尝试为我的页面提供一个看起来像小插图的背景。

html {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat:no-repeat;
    background: -webkit-radial-gradient(rgba(249, 249, 249,1),rgba(249, 249, 249,0)); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(rgba(249, 249, 249,1),rgba(249, 249, 249,0)); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(rgba(249, 249, 249,1),rgba(249, 249, 249,0)); /* For Firefox 3.6 to 15 */
    background: radial-gradient(rgba(249, 249, 249,1),rgba(249, 249, 249,.66),rgba(249, 249, 249,0)); /* Standard syntax (must be last) */
    background-color: #bbbbbb;
    background-attachment: fixed;
}

我正在使用 rgba，因为它减少了一点 strip 。

但基本上，当我想要左边的图像时，我得到的是右边的(夸张的)图像。红色代表可见屏幕。

我该怎么做？

Answer 1

事实证明，我只需要在所有渐变调用中多一个参数“circle”。例如:

-webkit-radial-gradient(circle, rgba(249, 249, 249,1),rgba(249, 249, 249,0)); /* Safari 5.1 to 6.0 */

原始代码和末尾的代码:

background-position: center;

完全符合我的描述。