css背景图充满屏幕
代码:
body {
/* 加载背景图 */
background: url(resource/inv_bg.png);
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 背景图垂直、水平均居中 */
background-position: center center;
/*这个应该是为了IE浏览器,没深究*/
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 设置背景颜色,背景图加载过程中会显示背景色 */
background-color: #464646;
}
background-size: cover;这样浏览器就会按比例缩放背景图直至背景图宽高不小于容器的宽高(在上面的例子中,就是body标签)。
这里需要注意的一点就是:如果背景图小于body标签的尺寸(例如在高分辨率显示器上,或页面内容特别多时),浏览器会拉伸图片。当把一个图片拉伸时,图片会变模糊。
因此,在选择背景图时,要特别注意尺寸。
background-size:cover;:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
background-size:contain;:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
同时,为了让背景图始终相对于viewport居中,声明了:background-position: center center;
上面的规则会把背景图缩放的原点定位到viewport的中心。
接下来需要解决的问题是:当内容的高度大于viewport的高度时,会出现滚动条。希望背景图始终相对于viewport固定,即使用户滚动时也是一样。
解决办法就是:background-attachment: fixed;
css背景图充满屏幕的更多相关文章
- css背景图与html插入img的区别
一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...
- Lodop打印控件不打印css背景图怎么办
background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...
- html的css背景图的repeat
HTML里background-image中,可以设置background-repeat实现平铺,前面博文中关于css样式换行的(相关博文:超文本css样式换行),其中有个三个div组合的,中间的di ...
- css - 背景图片充满整个屏幕
body { /* 加载背景图 */ background: url("../static/images/index/backImg.jpg") no-repeat; /* 背景图 ...
- css背景图等比例缩放,盒子随背景图等比例缩放
很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤. ...
- vue的挖坑和爬坑之css背景图样式终极解决方法
原问题 #wrapper{ width:100%; height:100%; position:fixed; background-image:url(./img/open_bg.jpg) } 在.v ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
- CSS背景图怎么自适应全屏(手机或者电脑)
#demo{ background-img:url(../bg.png); --(1)适用于上半部分背景图片,下半部分纯色 将背景图像等比缩放到完全覆盖屏幕,背景图有可能超出屏幕(容器) backgr ...
随机推荐
- react native 中es6语法解析
react native是直接使用es6来编写代码,许多新语法能提高我们的工作效率 解构赋值 var { StyleSheet, Text, View } = React; 这句代码是ES6 中新增的 ...
- 检测浏览器是否支持cookie功能
<script> if(navigator.cookieEnabled) { document.write("你的浏览器支持cookie功能!"); } else{ d ...
- MVC 2nd
步骤 3 创建控制器. StudentController.java public class StudentController { private Student model; private S ...
- 电子表格Excel
电子表格Excel 本次课内容一.认识下Excel1.扩展名 office2007以前,扩展名是xls office2007,扩展名是xlsx 2.文件扩展名是xls或xlsx的文件,excel电子表 ...
- spring boot 事务支持
- 吴裕雄 19-Mysql 连接的使用
JOIN 按照功能大致分为如下三类:INNER JOIN(内连接,或等值连接):获取两个表中字段匹配关系的记录.LEFT JOIN(左连接):获取左表所有记录,即使右表没有对应匹配的记录.RIGHT ...
- 03_java基础(九)之综合练习与考核评估
25.综合练习之车站业务分析 完成步骤: 需求: 以车站业务对车票做增删改查操作 1.建立数据库 2.建立车票表 3.建立java项目结构(model\dao\service\test) 4.创建mo ...
- Spring beanFactory ApplicationContext
一.BeanFactoryBeanFactory 是 Spring 的“心脏”.它就是 Spring IoC 容器的真面目.Spring 使用 BeanFactory 来实例化.配置和管理 Bean. ...
- create-react-app之proxy
[create-react-app之proxy] create-react-app可以用于一键创建web_client环境,默认使用webpack-dev-server.但在开发过程中,往往需要cli ...
- Python 继承与多继承
相关知识点: __class__.__name__的用法. >>> class ABC: def func(self): print('打印类名:',__class__.__name ...