0

我知道有几种技术可以使用 CSS3 或绝对定位和 100% 高度/宽度来获得全屏背景图像。

但是，所有这些技术都会导致固定的背景图像，这意味着如果您的某些内容大于需要滚动条的屏幕，则滚动时背景图像将保持固定。

是否可以将背景图像拉伸到页面的宽度/高度，而不是屏幕？

4

4 回答 4

2

我在构建全屏幻灯片时遇到了同样的问题：固定位置使图像在滑动包含元素时保持在原位，而不是让它们与该元素一起滑动......

我使用这些技术尝试了很多解决方法：

  • CSS-Only 技术#1：将位置设置为相对时工作正常，但不会垂直居中图像。

  • Awesome, Easy, Progressive CSS3 Way : 我之前尝试了所有的可能性都徒劳地意识到不填充位置值是有效的（真的很棒）！

    html { 
    background: url(images/bg.jpg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
于 2012-11-23T10:39:30.057 回答
1

我会向您指出backstretch jQuery 插件，以将此功能添加到您的页面。链接页面显示内容如何保持固定并根据浏览器的宽度/高度进行缩放。

编辑

我不太确定如何实施这样的解决方案；我认为您可能必须使用 javascript，因为在加载之前您无法确定内容的大小。这是我尝试的方法：

  • 计算加载后的内容大小
  • 将背景图像的拉伸设置为内容大小
  • 将一些重复此操作的函数绑定到任何浏览器大小更改

我不太确定它在性能方面的感觉如何，但这种技术的一个缺点可能是，除非您对内容设置大小限制，否则您可能必须使用非常大的图像来覆盖所有情况。

于 2011-07-20T07:26:48.877 回答
1

这种方法的问题是你永远无法猜测你的内容会变得有多大。1000 像素？10,000 像素？想象一下将图像拉伸到那么大，如果你决定使用一个巨大的图像，它会减慢你的页面加载速度，或者如果你决定使用一个合理大小的图像，如果它超出了它的边界，它将非常严重地扭曲。

以此为例，相应地增加内容计数，看看背景图像如何扭曲：http: //jsfiddle.net/andresilich/75Sfp/

于 2011-07-20T23:27:09.697 回答
0

假设您希望网站中有一个可变的图像大小标题（占据整个高度）

在您的标题中添加一个 ID 或类，使用您想要的任何命名。

我将其视为 ( id="test")

现在，转到链接的 JS 文件并粘贴这个..

var x = screen.availHeight + "px";
console.log(x)

document.getElementById("test").style.height = x;
于 2018-02-25T14:29:21.937 回答