javascript - 如何显示不是图案的对角线背景图像

Question

我很难使用对角线背景图像。这不是“模式”，而是用于两种布局的完整图像。（图片：http: //i.imgur.com/mcWseu1.jpg）

我已经能够为模板一实现预期的结果，但我在模板二上遇到了困难。

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

让图像保持与模板一中相同的纵横比（如果它的高度为 100% 以适应模板一中的窗口，那么它在模板二中的大小应为 100% 高度，但固定除外）这是为了使用单独的模板保持页面之间的一致性。

谢谢您的帮助。

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

CSS（应用于 img 元素）：

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

score 4 · Accepted Answer

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

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

我已经证明了这一点：http: //jsfiddle.net/GHDbM/

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

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

上面的auto例子中width的100%是针对高度的。

另一个小提琴：http: //jsfiddle.net/sk2RY/

1 回答 1