手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >多种方法使背景图片占据整个屏幕
多种方法使背景图片占据整个屏幕
摘要:一直在关注这个问题(其实是因为压根就是初学者.....就现在了解有几种方法:①CSS处理方法(仅IE)#backGroundImg{back...

一直在关注这个问题(其实是因为压根就是初学者.....

就现在了解有几种方法:

①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%;

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

【多种方法使背景图片占据整个屏幕】相关文章:

2种方法实现CSS LI隔行换色

firefox和谷歌不显示body背景图片的解决方法

css body背景图全屏不论分辨率大小

鼠标经过背景变色之CSS+DIV方法

DIV背景图片在Firefox下不显示通过overflow:auto可解决

兼容FIREFOX下背景层的自适应高度

css设置body背景图片随内容增加多少

CSS关于解决图片元素下多余空白的BUG

另一个CSS图片替换的技巧

CSS Sprites如何使用重复背景日期

精品推荐
分类导航