爱吾下载 ● 文章资讯

分类分类

怎样使背景图片占据整个屏幕？

更新时间：2026-05-10 18:30:08作者：网络

案例：想让一张图片占据整个屏幕，也就是说，当屏幕变大时背景图片也变大并占据整个屏幕，要求一定兼容ie

一、CSS处理方法（仅IE）

代码如下:

#backGroundImg { 
background-image: url("X.png"); 
background-repeat: no-repeat; 
filter:progid:dximagetransform.microsoft.alphaimageloader(src='X.png', sizingmethod='scale');/*加上这个，详细可Google*/ 
}

二、把背景图片做的足够大

一般情况下，我们设计给我的图都是1440*900的极限，然后居中显示就会适应大部分的屏幕了。可是现在显示器越来越大，加上Mac下Retina屏超高分辨率的虐待...当分辨率超过背景图大小时，边上就会变成背景色了。

所以最直观的方法就是将背景图的大小，翻倍，翻倍，再翻倍....只要超过主流浏览器最大分辨率就好了。

不过弊端很明显，过大的图片会极大的影响网页的加载速度。

三、用Js/jQuery控制大小（这其实是种假象的背景自适应）

利用加入个<img>标签，将z-index设置的低一些，然后用Js/jQuery监视窗口大小，然后改变图片的长宽就好了。（详细Google）

不过，这种方法，当图片被拉伸或压缩的过于严重的时候会非常可怕的.....

而且，如果屏蔽右键功能会很蛋疼；不屏蔽右键功能就露怯了。

四、利用<img>元素自适应。

这个其实和三差不多，如果是整个网页的背景，在起始<body>后马上加上<img>然后将CSS设置

width:100%;

height:100%;

这样，图片就会随着浏览器的放大缩小自动缩放了。弊端也和三差不多。 

 

 

展开全部

相关

手游推荐
说两句网友评论
    我要跟贴
    取消