CSS css完美的全屏图片背景
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7259084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css perfect full screen image background
提问by alexandru
I'm wondering which is the best solution for an background image to fit every screen, every browser. Also I've noticed that the majority of techniques crop the image a little bit. I know there are a lot of techniques to do this but I want to know which is the best in your opinion. Thanks!
我想知道哪个是适合每个屏幕、每个浏览器的背景图像的最佳解决方案。我还注意到,大多数技术都会稍微裁剪图像。我知道有很多技术可以做到这一点,但我想知道您认为哪种技术最好。谢谢!
回答by DuMaurier
This post from CSS-tricks.comcovers different techniques for full screen background images and includes a fall-back for old versions of IE (I haven't tested the IE fix).
这篇来自 CSS-tricks.com 的帖子涵盖了全屏背景图像的不同技术,并包括对旧版本 IE 的回退(我还没有测试过 IE 修复程序)。
When I don't need to worry about supporting old browsers, I generally use the CSS3 method:
当我不需要担心支持旧浏览器时,我一般使用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;
}
回答by Tony Wu
Add this inside the body tag:
在 body 标签中添加:
<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
http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.htmlg