【问题标题】:css background image position fixed not working as expectedcss背景图像位置固定不按预期工作
【发布时间】:2014-07-19 17:55:24
【问题描述】:

我是 UI 开发的新手,最近开始构建我的第一个 Web 应用程序,并选择了 html5-boilerplate 框架。我开发了我的第一个 html 页面并将其托管在 http://www.techtrek.guru 域下。

我对几个问题感到震惊:

  1. 我希望修复英雄图像并希望在滚动页面时滚动文本。目前,当我滚动网页时,英雄图像也会向上滚动。

    我将position:fixed 属性添加到.hero 类,但它没有按预期工作。此外,我还尝试将z-index 属性添加到-10,这也不起作用。

你能帮我理解我哪里出错了吗?

【问题讨论】:

  • 所以您希望图像在向下滚动时被“学习技术...”部分覆盖?
  • 我希望“学习技术...”部分在我滚动页面时向上滚动,但希望背景图像保持固定。
  • 完成,检查我的答案。此外,您可能希望在您的页面中添加一个非空的 <title> 以便验证。

标签: html css responsive-design html5boilerplate


【解决方案1】:

添加

background-attachment: fixed;

.hero 类。 Reference for background-attachment.

【讨论】:

  • 谢谢。这有效,但部分有效。因为当我调整屏幕宽度时,图像也会调整到一个点然后保持固定。
  • @Pradeep:这应该在另一个问题中提出;毕竟,原始版本中的图像也没有调整大小,您也没有在问题陈述中提到这一点。
  • 好的。我会问另一个问题。这对我有帮助。谢谢
  • @Pradeep:很高兴为您提供帮助;确保接受它作为答案,然后单击概述的复选标记。
猜你喜欢
  • 2019-10-24
  • 2019-04-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-01-29
  • 1970-01-01
  • 2020-10-20
  • 1970-01-01
相关资源
最近更新 更多