css完美的全屏图像背景

问题描述：

我想知道哪个背景图像适合每个屏幕，每个浏览器的最佳解决方案。另外我注意到，大多数技术都会使图像产生一点点影响。我知道有很多技术可以做到这一点，但我想知道哪些是你认为最好的。谢谢！css完美的全屏图像背景

我不要认为真的有所有解决方案。您的解决方案将很大程度上取决于您的图像的外观和应用方式。例如，许多背景图像在图像中心的内容区域宽度上留下很大的空隙。而其他背景图像通过内容区域显示。一些重复。背景图像有几种技术，但根据设计的不同而不同。 – Jrod

http://css-tricks.com/3458-perfect-full-page-background-image/ - jquery方法 - 可能是最好的解决方案。 – easwee

答

这post from CSS-tricks.com涵盖了全屏幕背景图像的不同技术，并包括老版本的IE（我还没有测试IE修复）的退步。

当我不需要担心支持旧的浏览器，我一般使用CSS3方法：

html { 
    background: url(http://lorempixum.com/1440/900/sports) 
     no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

我知道，方式老，但是有没有一个好的替代方案，不会随浏览器调整大小？希望我能给出一个最小高度的图像 –

答

添加这个身体标记内：

<img src="img/beach.jpg" 

style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;">

http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.htmlg

css完美的全屏图像背景

相关推荐