1

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

  1. 在一个模板上，图像应以 100% 的高度固定在页面上，位于右上角并随页面滚动。
  2. 在第二个模板上，图像应保持与模板一中相同的纵横比，但不应固定。相反，它应该与页面的其余部分一起向上滚动。

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

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

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

谢谢您的帮助。

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

CSS（应用于 img 元素）：

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

1 回答 1

4

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

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

http://www.w3.org/community/webed/wiki/CSS_shorthand_reference#Background

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

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

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

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

http://www.w3.org/TR/css3-background/#the-background-size

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

于 2013-08-03T11:29:01.473 回答