将 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

事实证明，在所有渐变调用中，我只需要一个参数“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 2

您可以使用 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 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;
}

"背景尺寸：封面；"为了拉伸，所以将高度增加一倍并将背景重新定位到中心。