满屏页面(图片充满整个屏幕)
2016-07-12 00:00
239 查看
1.设置一个大的div盒子,命名bigbox。不需要设置宽高值,在css当中设置html,body{height:100%}(保持在不同大小的浏览器窗口都是满屏显示),再设置bigbox盒子{height:100%}(适应html的高度。)
2.添加背景图片,选区必须是足够大的高清图片。在盒子bigbox中添加img图片(第一子元素),给图片定义class为photo,在css中设置{width:100%;}(为了适应bigbox的宽度)。3.由于图片过大,会出现横向滚动条,所以给bigbox盒子添加{overflow:hidden},隐藏超出的部分。另外,当浏览器窗口缩小的时候,图片的宽高值也会相应的缩小,当图片缩小到一定程度时,下方有空白区域的出现。则需要给图片photo设置{min-width:1200px;}(防止空白区域的出现)。***注意:***不能给图片photo设置高度100%值,则图片会变形。宁可让客户看到一部分,也不能让图片变形。如果父元素的宽度是100%显示。其中两块子元素左浮,右浮。当窗口缩小到一定程度,则出现子元素交错的情况。则给父级元素设置一个最小宽度min-width值.
2.添加背景图片,选区必须是足够大的高清图片。在盒子bigbox中添加img图片(第一子元素),给图片定义class为photo,在css中设置{width:100%;}(为了适应bigbox的宽度)。3.由于图片过大,会出现横向滚动条,所以给bigbox盒子添加{overflow:hidden},隐藏超出的部分。另外,当浏览器窗口缩小的时候,图片的宽高值也会相应的缩小,当图片缩小到一定程度时,下方有空白区域的出现。则需要给图片photo设置{min-width:1200px;}(防止空白区域的出现)。***注意:***不能给图片photo设置高度100%值,则图片会变形。宁可让客户看到一部分,也不能让图片变形。如果父元素的宽度是100%显示。其中两块子元素左浮,右浮。当窗口缩小到一定程度,则出现子元素交错的情况。则给父级元素设置一个最小宽度min-width值.
相关文章推荐
- 三目运算符报空指针,JDK自动拆箱
- 保存line_bg(1px宽的线性渐变)图技巧
- 快速教给你如何制作水墨风景
- 搭建ActiveMQ Master/Slave+Network Cluster集群
- 搭建ActiveMQ Master/Slave(LevelDB+Zookeeper)
- window 便签的用法
- ubuntu下安装mysql及卸载mysql方法
- ubuntu15.04 安装mysql可视化工具navicat
- Highcharts基础教程(四):数据列(Series)
- Highcharts基础教程(五):颜色(colors)
- jQuery插件开发
- Redis Sentinel Plugin For JFinal
- 进程不退出
- 操作系统
- Maven构建web项目在Eclipse中部署的几种方法
- Eclipse+Maven构建web项目及部署时Maven lib依赖问题的解决
- 试用了一下SpringBoot+AngularJS的工程生成器JHipster
- xml转义字符
- 网络时代浅谈VPS虚拟专用服务器解决方案
- Genymotion-ARM-Translation_v1.1.zip