2023年6月21日发(作者：)

利⽤css将背景图⽚铺满整个屏幕⽅法⼀：

⽅法⼆：在低版本的ie中#div { width: 100%; height:100%; background:url('/assets/p-default/images/act/') no-repeat; background-size:100% 100%; position: relative; filter: progid:mageLoader(src='/assets/p-default/images/act/', sizingMethod='scale');}问题⼀：在低版本的ie中，如果图⽚过⼤，在屏幕中只能显⽰部分图⽚解决：#div { width: 100%; height:100%; background:url('/assets/p-default/images/act/') no-repeat; background-size:100% 100%; position: relative; filter: progid:mageLoader(src='/assets/p-default/images/act/', sizingMethod='scale'); -ms-behavior: url('/assets/p-default/css/'); behavior: url('/assets/p-default/css/');} ，这个是⼀个国外⼤⽜写的⽂件，下载地址：上⾯的两种⽅法不够完美，图⽚容易拉伸，造成图⽚上的⽂字的效果很难看下⾯的⽅法彻底解决问题：我们需要的效果是1. 图⽚以背景的形式，不留空⽩区域2. 保持图像的纵横⽐（图⽚不变形）3. 图⽚居中4. 不出现滚动条5. 多浏览器⽀持以图⽚为例最简单，最⾼效的⽅法 CSS3.0归功于css3.0新增的⼀个属性，可以简单的实现这个效果，这⾥⽤fixed和center定位背景图，然后⽤background-size来使图⽚铺满，具体css如下html { background: url() no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}这段样式适⽤于以下浏览器Safari 3+ChromeIE 9+Opera 10+ (Opera 9.5 ⽀持background-size属性 但是不⽀持cover)Firefox 3.6+这⾥你会发现ie8及以下版本不⽀持，这些蛋疼浏览器则需要添加下⾯的css来设置兼容filter: progid:mageLoader(src='.', sizingMethod='scale');-ms-filter: "progid:mageLoader(src='', sizingMethod='scale')";这个⽤滤镜来兼容的写法并不是很完美，⾸先是图⽚路径，这⾥只能是相对于根⽬录的路径，或者⽤绝对路径；然后是图⽚纵横⽐改变了，是拉伸铺满的形式。尽管如此，总⽐留空⽩好多了吧（如果背景图的宽⾼够⼤，则可以不⽤这段，变成简单的平铺，⽐图⽚变形效果好写，⼤家可以尝试下）如果你觉得上⾯的⽅法不是很满意，那试试下⾯这种⽤img形式来实现背景平铺效果⾸先在html中加⼊以下代码然后通过css来实现铺满效果（假设图⽚宽度1024px） { min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0;}下⾯这个是为了屏幕⼩于1024px宽时，图⽚仍然能居中显⽰（注意上⾯假设的图⽚宽度）@media screen and (max-width: 1024px) { { left: 50%; margin-left: -512px; }}兼容以下浏览器以下浏览器的所有版本: Safari / Chrome / Opera / FirefoxIE9+IE 7/8: 平铺效果⽀持，但是在⼩于1024px的屏幕下居中效果失效下⾯再说⼀种⽅法JQ模拟的⽅法html部分css部分#bg { position: fixed; top: 0; left: 0; }.bgwidth { width: 100%; }.bgheight { height: 100%; }js部分$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $() / $(); function resizeBg() { if ( (() / ()) < aspectRatio ) { $bg .removeClass() .addClass('bgheight'); } else { $bg .removeClass() .addClass('bgwidth'); } } (resizeBg).trigger("resize");});⽀持浏览器以下浏览器的所有版本: Safari / Chrome / Opera / FirefoxIE7+其实我⾃⼰⼀般⽤的是（因为够⽤了，咱不挑/其实上⾯的都是俺翻译过来的）html部分

css部分.bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url() no-repeat #000; background-size: cover; z-index: -1;}如果图⽚宽度没有达到1900px以上，我会加上ie的滤镜来⽀持ie8(这⾥我故意⽤了绝对路径，请知晓，代码长的我想砸了ie)-ms-filter:"progid:mageLoader(src='./', sizingMethod='scale')";filter:progid:mageLoader(src='/', sizingMethod='scale');浏览器⽀持ie7+绝⼤多数主流浏览器

2023年6月21日发(作者：)

利⽤css将背景图⽚铺满整个屏幕⽅法⼀：

⽅法⼆：在低版本的ie中#div { width: 100%; height:100%; background:url('/assets/p-default/images/act/') no-repeat; background-size:100% 100%; position: relative; filter: progid:mageLoader(src='/assets/p-default/images/act/', sizingMethod='scale');}问题⼀：在低版本的ie中，如果图⽚过⼤，在屏幕中只能显⽰部分图⽚解决：#div { width: 100%; height:100%; background:url('/assets/p-default/images/act/') no-repeat; background-size:100% 100%; position: relative; filter: progid:mageLoader(src='/assets/p-default/images/act/', sizingMethod='scale'); -ms-behavior: url('/assets/p-default/css/'); behavior: url('/assets/p-default/css/');} ，这个是⼀个国外⼤⽜写的⽂件，下载地址：上⾯的两种⽅法不够完美，图⽚容易拉伸，造成图⽚上的⽂字的效果很难看下⾯的⽅法彻底解决问题：我们需要的效果是1. 图⽚以背景的形式，不留空⽩区域2. 保持图像的纵横⽐（图⽚不变形）3. 图⽚居中4. 不出现滚动条5. 多浏览器⽀持以图⽚为例最简单，最⾼效的⽅法 CSS3.0归功于css3.0新增的⼀个属性，可以简单的实现这个效果，这⾥⽤fixed和center定位背景图，然后⽤background-size来使图⽚铺满，具体css如下html { background: url() no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}这段样式适⽤于以下浏览器Safari 3+ChromeIE 9+Opera 10+ (Opera 9.5 ⽀持background-size属性 但是不⽀持cover)Firefox 3.6+这⾥你会发现ie8及以下版本不⽀持，这些蛋疼浏览器则需要添加下⾯的css来设置兼容filter: progid:mageLoader(src='.', sizingMethod='scale');-ms-filter: "progid:mageLoader(src='', sizingMethod='scale')";这个⽤滤镜来兼容的写法并不是很完美，⾸先是图⽚路径，这⾥只能是相对于根⽬录的路径，或者⽤绝对路径；然后是图⽚纵横⽐改变了，是拉伸铺满的形式。尽管如此，总⽐留空⽩好多了吧（如果背景图的宽⾼够⼤，则可以不⽤这段，变成简单的平铺，⽐图⽚变形效果好写，⼤家可以尝试下）如果你觉得上⾯的⽅法不是很满意，那试试下⾯这种⽤img形式来实现背景平铺效果⾸先在html中加⼊以下代码然后通过css来实现铺满效果（假设图⽚宽度1024px） { min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0;}下⾯这个是为了屏幕⼩于1024px宽时，图⽚仍然能居中显⽰（注意上⾯假设的图⽚宽度）@media screen and (max-width: 1024px) { { left: 50%; margin-left: -512px; }}兼容以下浏览器以下浏览器的所有版本: Safari / Chrome / Opera / FirefoxIE9+IE 7/8: 平铺效果⽀持，但是在⼩于1024px的屏幕下居中效果失效下⾯再说⼀种⽅法JQ模拟的⽅法html部分css部分#bg { position: fixed; top: 0; left: 0; }.bgwidth { width: 100%; }.bgheight { height: 100%; }js部分$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $() / $(); function resizeBg() { if ( (() / ()) < aspectRatio ) { $bg .removeClass() .addClass('bgheight'); } else { $bg .removeClass() .addClass('bgwidth'); } } (resizeBg).trigger("resize");});⽀持浏览器以下浏览器的所有版本: Safari / Chrome / Opera / FirefoxIE7+其实我⾃⼰⼀般⽤的是（因为够⽤了，咱不挑/其实上⾯的都是俺翻译过来的）html部分

css部分.bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url() no-repeat #000; background-size: cover; z-index: -1;}如果图⽚宽度没有达到1900px以上，我会加上ie的滤镜来⽀持ie8(这⾥我故意⽤了绝对路径，请知晓，代码长的我想砸了ie)-ms-filter:"progid:mageLoader(src='./', sizingMethod='scale')";filter:progid:mageLoader(src='/', sizingMethod='scale');浏览器⽀持ie7+绝⼤多数主流浏览器