将1：1径向背景居中

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，因为它可以减少一些条带。

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

我该怎么做？

Answer 1

您可以使用SVG图像作为背景。使用图像为浏览器提供了一种了解背景宽高比的方法。渐变不具有已知的宽高比。

我在这里将SVG内联在CSS中。

这应该可以解决问题：

小提琴： http://jsfiddle.net/tca8zzth/1/

<强> CSS

html {        
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;        
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"><radialGradient id="SVGID_1_" cx="250" cy="250" r="250" gradientUnits="userSpaceOnUse"><stop  offset="0" style="stop-color:#F9F9F9"/><stop  offset="1" style="stop-color:#F9F9F9;stop-opacity:0"/></radialGradient><rect fill="url(#SVGID_1_)" width="500" height="500"/></svg>');
    background-color: #bbbbbb;
    background-attachment: fixed;
    background-position: 50% 50%;
}

更新

为了在Firefox中使用此功能，data-uri值中的哈希值（#）应编码为%23。

更新小提琴： http://jsfiddle.net/tca8zzth/2/

更新了CSS

background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"><radialGradient id="SVGID_1_" cx="250" cy="250" r="250" gradientUnits="userSpaceOnUse"><stop  offset="0" style="stop-color:%23F9F9F9"/><stop  offset="1" style="stop-color:%23F9F9F9;stop-opacity:0"/></radialGradient><rect fill="url(%23SVGID_1_)" width="500" height="500"/></svg>');

Answer 2

原来我只需要在所有渐变调用上再增加一个参数“circle”。例如：

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

使用原始代码并在最后：

background-position: center;

正是我所描述的。

Answer 3

html {
    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;
    background-size: 100% 200%;
    background-position: center;
}

“background-size：cover;”对于拉伸，请将高度增加一倍，然后将背景重新定位到中心。