显示需要重复但没有重复模式的背景图像

Question

我的背景没有明显的重复模式，我需要帮助将其添加到我的网页作为背景。

附加图像是主要页面背景。在网络浏览器达到1280+ px后，主背景将保持在中心位置，右侧和左侧淡出为白色，如附图中所示。

一旦页面高度大于背景图像高度的高度，我不知道如何平滑背景的过渡，没有重复的模式，我不知道一个好的方法来制作它页面高度达到该点后，平滑/无缝转换。

Answer 1

这是一项有趣的心灵练习。我确信有很多方法可以实现这一点，但我可能会通过额外的div来实现它，它具有不透明度渐变和媒体查询。

在结束</body>标记之前创建一个div，并为其提供您希望'淡出'的高度。

<div id="fadeout"></div>

在样式表中：

body {
    background: url('http://i.stack.imgur.com/70dUX.jpg') top center;
    background-repeat: no-repeat;
    margin: 0;
}
#fadeout {
    display: none;
}

@media all and (min-height: 529px) {
    #fadeout {
        display: block;
        width: 100%;
        height: 100px;
        position: absolute;
        top: 439px;
        background: #333;
        background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
    }
}

这应该给白色背景淡出的外观。显然将高度配置为正确的背景高度，我只使用529像素，因为这是你上面列出的图像有多大。

JSFiddle：http://jsfiddle.net/prex/kAwce/