【CSS】整屏大背景
1. 利用div的层次,设置底层div充满屏幕,并给div设置背景图
<div id="Layer1" style="position:absolute;top:0;width:100%; height:100%; z-index:-1">
<img src="resources/um/img/um_bg_1.jpg" height="100%" width="100%"/>
</div>
2. 利用body元素
body{background:url no-repeate center position red ; background-size:cover};
body{background:url no-repeate center position red ; background-size:contain};
background-size:cover 背景图片充满整个容器,不考虑是否看到完整图片
background-size:contain 背景图片充满整个容器,并出现完整图片
background-size:200px 100px; 数值表示方式
background-size:30% 60%; 百分比表示方式
background-size:auto; 以图片自身大小来填充元素,即auto值
3. js 获取屏幕宽高,设置img 宽高
4. 使用滤镜
body{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/skin/v2011/images/body.png',sizingMethod='scale');
background-repeat: no-repeat;
background-positon: 100%, 100%;
}
5. 图片自动适应浏览器大小 - 待验证
img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
http://liyunpeng.iteye.com/blog/2101956
【CSS】整屏大背景的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 原生css实现fullPage的整屏滚动贴合
目录 1,前言 2,效果展示 3,属性说明 3.1 scroll-snap-type 3.2,scroll-snap-align 4,实际使用 4.1,兼容性 1,前言 今天摸鱼的时候,发现一个很有意 ...
- 更愉快的书写CSS
我在写CSS的时候经常会碰到些麻烦事儿: 1)看上去蛮简单的排版却写了很久 2)代码写的越来越散,总是这里补一句,那里补一句,没有条理性 3)margin.padding.font-size等属性在不 ...
- ie6,ie7,ie8 css bug兼容解决方法
IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...
- ie6,ie7,ie8 css bug兼容解决记录
ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...
- fullPage教程 -- 整屏滚动效果插件 fullpage详解
1.引用文件 [html] view plain copy print?在CODE上查看代码片派生到我的代码片 <link rel="stylesheet" href=&qu ...
- jquery实现整屏翻屏效果:jquery.mousewheel(一)
实现整屏上下翻效果:需加载的js <script type="text/javascript" src="js/jquery-1.8.3.min.js"& ...
- css 关于两栏布局,左边固定,右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
- jquery简单的大背景banner图片全屏切换
详细内容请点击 这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟.个人网站上 ...
随机推荐
- 关于Dubbo分布式服务
这篇文章写的详细,可参考 http://shiyanjun.cn/archives/1075.html
- Chapter 7:Statistical-Model-Based Methods
作者:桂. 时间:2017-05-25 10:14:21 主要是<Speech enhancement: theory and practice>的读书笔记,全部内容可以点击这里. 书中 ...
- 解决jmeter请求不成功或者报403错误
有同学遇到这种情况,jmeter请求一个网站,各项参数填写正确,可是响应是403,同样的请求放在浏览器执行就没有问题: 这是因为被请求的网站做了请求来源过滤,来源不明的请求拒绝访问,我们需要在jmet ...
- 浅论ajax跨域!从一个例子开始!
//所谓跨域,简单来说就是去访问不是自己域名下的数据 <!DOCTYPE html> <html lang="en"> <head> <m ...
- spring boot 入门操作(二)
spring boot入门操作 使用FastJson解析json数据 pom dependencies里添加fastjson依赖 <dependency> <groupId>c ...
- 不小心用js重做了一遍贪吃蛇
贪吃蛇游戏想必没人会感到陌生,这个游戏的js版本在网上也是一搜一大把,今天我要介绍的仍然是如何用js做一个贪吃蛇游戏,但在关键一步,蛇的运动的实现上略有不同. 贪吃蛇的js版本通常用连续的方块元素来实 ...
- 我的学习之路_第二十一章_JDBC连接池
JDBC连接池和DButils [DBCP连接池工具类] 使用读取配置文件的方式 DBCP中有一个工厂类 BasicDataSourceFactory 工厂类中有一个静态方法 返回值为: DataSo ...
- 7.modifier插件的自定义和使用
1.在plugins下面创建一个文件 modifier.changeDate.php 编写: <?php function smarty_modifier_changeDate($utime,$ ...
- 配置SSH无秘钥登录
[hadoop@hadoop01 ~]$ cd .ssh [hadoop@hadoop01 .ssh]$ ls authorized_keys id_rsa id_rsa.pub known_host ...
- rails 多态
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Monaco; color: #f4f4f4; background-color: rgba( ...