如何拥有一个非固定的全屏背景图片？

我知道several techniques存在全屏幕背景图像，无论是与CSS3或绝对定位和100％的高度/宽度。如何拥有一个非固定的全屏背景图片？

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

是否有可能有代替屏幕背景图像stetch到的页面的宽度/高度？

来源

2011-07-20 Wookai

我不得不为我建立一个fullsceen幻灯片同样的问题：固定的位置，使图像停留在原地，而滑动包含的元素，而不是让他们与此元素滑动......

我使用those techniques尝试了很多解决办法的：

CSS-只有技术＃1：位置设置为relativ工作正常e，但不会将图像居中放置。

真棒，简单，渐进CSS3的方式：我尝试了所有的可能性，然后才意识到不填充位置值工作（真棒）！

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-23 10:39:30 kamah

非常感谢！我没有看到你的答案，它效果很好！ – Wookai

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

编辑

我真的不知道我怎么会实现这样的解决方案;我想你可能不得不使用javascript，因为在加载之前你无法找到你的内容的大小。下面是我想尝试一下：加载后

计算含量大小
设置背景图片，以内容大小
绑定一些功能重复这对任何浏览器尺寸变化拉伸

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

来源

2011-07-20 07:26:48 samy

这是我已经知道该怎么做。我正在寻找的是将背景延伸到**页**，而不是屏幕。在您提出的脚本演示中，您可以看到滚动时背景图像不会移动。我希望它移动，即像页面的其余部分。 – Wookai

对不起，我的坏，我误解了：编辑我的答案 – samy

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

拿这个举例来说，增加的内容进行相应的计数和查看背景图像如何扭曲：http://jsfiddle.net/andresilich/75Sfp/

来源

2011-07-20 23:27:09

我意识到图像大小造成的失真和问题。但你可以想象一个情况，你知道你的内容有时会比屏幕大，但不是100倍。 – Wookai

那么你期待背景图像的行为如何？随着页面的内容一起拉伸？或者按比例增加页面内容的大小？ –

我想让它伸展。如果它有点失真就没问题。就像在你的例子中一样，但是对于整个页面而不是一个div。 – Wookai

假设你想在你的网站上的可变图像大小的头（它占据整个高度）

里面你的头添加与任何命名你想要一个ID或类。

我将把它作为（id="test"）

现在，去链接的JS文件并粘贴此..

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

document.getElementById("test").style.height = x;

来源

2018-02-25 14:29:21 NoobieSatan

如何拥有一个非固定的全屏背景图片？

回答

相关问题