多种方法使背景图片占据整个屏幕

ttx9n · 发表于 2014-2-24 11:45:59

使背景图片占据整个屏幕的方法有很多：CSS处理、把背景图片做的足够大、用Js/jQuery控制大小、利用img元素自适应，详细请了解本文一直在关注这个问题（其实是因为压根就是初学者.....

就现在了解有几种方法：

①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%;
这样，图片就会随着浏览器的放大缩小自动缩放了。弊端也和③差不多。

Anthonylam · 发表于 2022-11-1 04:29:14

加快速度很快就撒谎

z835648964 · 发表于 2023-9-12 08:16:55

还可以不错

a971560 · 发表于 2023-10-10 16:00:36

的谁vdvdsvdsvdsdsv

黑白键 · 发表于 2023-10-26 11:50:17

很不错的玩意

溪谷玉贤 · 发表于 2023-11-1 23:59:06

为全额万千瓦

5vulod · 发表于 2024-4-22 20:36:16

不错的源码论坛

idy6_yus · 发表于 2024-6-7 15:49:23

感谢楼主分享

回复用户1 · 发表于 2024-6-17 17:55:26

数据库了多久撒快乐的健身卡啦

0y3yp · 发表于 2024-6-30 06:22:18

dfdsafdsfdsfdsf

账号		自动登录	找回密码
密码			立即注册

[CSS] 多种方法使背景图片占据整个屏幕

相关帖子