【问题标题】:CSS - Background Image StretchCSS - 背景图像拉伸
【发布时间】:2013-03-26 19:00:22
【问题描述】:

我正在尝试获得与本网站类似的背景效果:

通过查看它,网站的背景是黑色的,但有一个水平拉伸的背景图像保留在页面顶部。当页面向下滚动时,图像会停留在顶部,但会与背景颜色融为一体。

我尝试制作示例中的图像并使用background-size:cover,但是当我向下滚动时,图像保持静止,只有内容滚动。如果这有任何意义!

通过查看示例,有人能解释一下实现这一点需要什么 CSS 吗?还有,图片大小应该是多少(在 PS 中),才能让它在更大的浏览器中拉伸而不损失质量?

我尝试查看该网站的 CSS 文件以了解发生了什么,但所有内容都集中在一行上,而且难以解决。

我会添加一个指向该网站的链接以显示它是如何滚动的,但显然我不被允许,所以必须截屏。

非常感谢。

【问题讨论】:

  • 不要链接到您的网站。请阅读:meta.stackexchange.com/questions/125997/…
  • @Diodeus:这不是我的网站。我不明白如何以其他方式向专家展示 SO。我可以放一个屏幕截图,但它不会解释问题的滚动部分。我该如何解决?
  • 您应该尝试在不使用链接的情况下解释问题。
  • 为确保在拉伸时不使用质量,我建议使用 .png 图像。
  • @Diodeus:我已编辑问题以遵守您提到的规则。如果您投了反对票,如果您对已编辑的问题格式感到满意,我将不胜感激。

标签: css background


【解决方案1】:

看起来背景使用了css:

background:#000000 url(<img>) no-repeat scroll center top;

其中设置了一个背景色和图片,将图片静态放置在顶部,这样向下滚动后,背景色才可见。

要查看此效果,请使用 chrome,将 css 更改为:

background:#00FF00 url(<img>) no-repeat scroll center top;

你会看到发生了什么。

【讨论】: