Question

我在对角背景图像上遇到了困难。这不是“模式”，而是在两种类型的布局中使用的完整图像。（图片：http://i.imgur.com/mcWseu1.jpg）

我已经能够达到模板一的预期效果，但我在模板二上遇到了困难。

Javascript是唯一的解决方案吗？如果有，任何建议？同样，我无法解决的挑战：

获取图像以保持与模板1中相同的纵横比（如果它是100％高度以适合模板1中的窗口，那么它应该在模板2中的100％高度处理，除了被修复）这是为了使用单独的模板保持页面之间的一致性。

感谢您的帮助。

编辑：我没有代码可以参考我面临的实际挑战。但这是我找到的第一个模板的解决方案：

CSS（应用于img元素）：

.abovefold {
    width: auto;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: -1;
}

Answer 1

我相信您正在寻找CSS background-attachment属性。要修复背景，只需将其设置为：

.example {
    background-image: url('http://i.imgur.com/mcWseu1.jpg');
    background-attachment: fixed;
}

我在fidde中证明了这一点：http://jsfiddle.net/GHDbM/

在确定背景尺寸时，您需要设置background-size属性：

.example {
    background-size: auto 100%; /* Adjust to element height */
}

以上示例中的auto适用于width，100%适用于身高。