w3cschool.cn/css/css-sfrk2opy.html

网站大背景（按比例缩放背景图片）

(2013-08-12 14:56:34)转载▼

标签： html css ccs3 html5 it

很多网站是全背景图片的，而且适应各种主流分辨率，给人一种干净大气的感觉，实属设计派的一个耍酷良方，下面介绍几种实现全屏图片自适应缩放背景图片的方法。

1.帅气简单的CSS3方法

1. html {
2. background: url(images/bg.jpg) no-repeat center center fixed;
3. -webkit-background-size: cover;
4. -moz-background-size: cover;
5. -o-background-size: cover;
6. background-size: cover;
7. }

复制代码

• Safari 3+
• Chrome Whatever+
• IE 9+
• Opera 10+
• Firefox 3.6+

2.只使用CSS之方法一

1. img.bg {
2. min-height: 100%;
3. min-width: 1024px;
4. width: 100%;
5. height: auto;
6. position: fixed;
7. top: 0;
8. left: 0;
9. }
10. @media screen and (max-width: 1024px) {
11. img.bg {
12. left: 50%;
13. margin-left: -512px;
14. }
15. }

复制代码

• 以下浏览器的任何版本: Safari / Chrome / Opera / Firefox
• IE 6: （各种方案奈我何？！）
• IE 7/8: 大部分工作，小屏幕的时候全屏，但是不是居中
• IE 9: 没问题

3.只使用CSS之方法二

复制代码

1. #bg {
2. position:fixed;
3. top:-50%;
4. left:-50%;
5. width:200%;
6. height:200%;
7. }
8. #bg img {
9. position:absolute;
10. top:0;
11. left:0;
12. right:0;
13. bottom:0;
14. margin:auto;
15. min-width:50%;
16. min-height:50%;
17. }

复制代码

• Safari / Chrome / Firefox
• IE 8+
• Opera

4.jQuery方法

复制代码

1. #bg { position: fixed; top: 0; left: 0; }
2. .bgwidth { width: 100%; }
3. .bgheight { height: 100%; }

复制代码

1. $(window).load(function() {
2. var theWindow = $(window),
3. $bg = $(“#bg”),
4. aspectRatio = $bg.width()/$bg.height();
5. function resizeBg() {
6. if ( (theWindow.width()/theWindow.height()) $bg
7. .removeClass()
8. .addClass(‘bgheight’);
9. }else{
10. $bg
11. .removeClass()
12. .addClass(‘bgwidth’);
13. }
14. }
15. theWindow.resize(function() {
16. resizeBg();
17. }).trigger(“resize”);
18. });

复制代码

• IE7+
• 任何除了IE的浏览器的任何版本