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

所属分类: 网页制作 / CSS 阅读数: 1328
收藏 0 赞 0 分享
一直在关注这个问题(其实是因为压根就是初学者.....

就现在了解有几种方法:

①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%;
这样,图片就会随着浏览器的放大缩小自动缩放了。弊端也和③差不多。
更多精彩内容其他人还在看

CSS3实现背景透明文字不透明的示例代码

这篇文章主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈CSS中的尺寸单位

这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好,移动端基本是清一色的webkit,经常会用到css的不同尺寸/长度单位,这里做个整理。感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

CSS中有些属性的前面会加上“*”或“_”所代表的意思

这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS 设置滚动条样式的实例代码

这篇文章主要介绍了CSS 设置滚动条样式的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)

这篇文章主要介绍了纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

纯css实现多级折叠菜单折叠树效果

这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果,运用checkbox的checked值来判断下级栏目是否展开,通过css3选择器提供的checked伪类来实现此效果,感兴趣的朋友参考下吧
收藏 0 赞 0 分享

CSS Grid 网格布局全解析

这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

css flex 弹性布局详解

这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

CSS3 二级导航菜单的制作的示例

这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用css禁用input、checkbox、select等html控件实现disable效果

这篇文章主要介绍了使用css禁用input、checkbox、select等html控件实现disable效果,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多