<!doctype html>
<html>
<body>
    ...Your content goes here...
</body>
</html>

　　给body标签指定背景图，这样背景图就可以填充整个浏览器viewport了。
　　其实，该方案对所有的块级容器都可以生效。块级容器的宽高是动态的，那么背景图将自动伸缩，充满整个容器。
　　CSS body标签的样式如下：
　　body {
/* 加载背景图 */
background-image: url(images/background-photo.jpg);

/* 背景图垂直、水平均居中 */
background-position: center center;

/* 背景图不平铺 */
background-repeat: no-repeat;

/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
background-attachment: fixed;

/* 让背景图基于容器大小伸缩 */
background-size: cover;

/* 设置背景颜色，背景图加载过程中会显示背景色 */

}

　　上面最重要的一条就是：
　　background-size: cover;

　　这样浏览器就会按比例缩放背景图直至背景图宽高不小于容器的宽高（在上面的例子中，就是body标签）。
　　这里需要注意的一点就是：如果背景图小于body标签的尺寸（例如在高分辨率显示器上，或页面内容特别多时），浏览器会拉伸图片。都知道，当把一个图片拉伸时，图片会变模糊。
　　因此，在选择背景图时，要特别注意尺寸。为了照顾到大尺寸屏幕，demo里用的图片尺寸为5498px * 3615px 。
　　同时，为了让背景图始终相对于viewport居中，声明了：
　　background-position: center center;

　　上面的规则会把背景图缩放的原点定位到viewport的中心。
　　接下来需要解决的问题是：当内容的高度大于viewport的高度时，会出现滚动条。希望背景图始终相对于viewport固定，即使用户滚动时也是一样。
　　解决办法就是：
　　background-attachment: fixed;
 body {

     /*加载背景图*/

     background-image: url('../../Images/background.jpg');

     /*背景图不平铺*/

     background-repeat: no-repeat;

     /*背景图不跟随滚动*/

     background-attachment: fixed;

     /*背景图垂直水平均居中*/

     background-position: center center;

     /*让背景图基于容器大小伸缩*/

     background-size: cover;

     margin: 0px auto;

 }

004-CSS怎样让背景充满整个屏幕的更多相关文章

  1. css怎样让背景充满整个屏幕

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. css中设置背景图片适应屏幕

    以body为例 body{ background: url(../img/jld.png) no-repeat center center fixed; -webkit-background-size ...

  3. css 使用background背景实现border边框效果

    css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...

  4. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  5. 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题

    在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...

  6. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  7. 用css实现条纹背景

    我先额外的说一下怎么用CSS绘制三角形: 绘制三角形是把边框加粗,将元素的宽高都设为0,让其余的边框颜色透明,下面我们来看实现的代码: 先把边框的颜色设置成不同颜色: #div{ border-col ...

  8. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  9. 第 17 章 CSS 边框与背景[下]

    学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...

随机推荐

  1. 1.使用RNN做MNIST分类

    第一次用LSTM,从简单做起吧~~ 注意事项: batch_first=True 意味着输入的格式为(batch_size,time_step,input_size),False 意味着输入的格式为( ...

  2. Elasticsearch学习笔记三

    PS:前面两章已经介绍了ES的基础及REST API,本文主要介绍ES常用的插件安装及使用. Elasticsearch-Head Head是一个用于管理Elasticsearch的web前端插件,该 ...

  3. Luogu 45887 全村最好的嘤嘤刀(线段树 树状数组)

    https://www.luogu.org/problemnew/show/T45887 题目背景 重阳节到了,我们最好的八重樱拥有全村最好的嘤嘤刀…… 题目描述 在绯玉丸力量的影响下,八重村成了一条 ...

  4. JAVA使用POI如何导出百万级别数据（转）

    https://blog.csdn.net/happyljw/article/details/52809244   用过POI的人都知道,在POI以前的版本中并不支持大数据量的处理,如果数据量过多还会 ...

  5. IOS开发中获取当前WIFI的名字

            ifs = [self fetchSSIDInfo]; ssid = [ifs objectForKey:@"SSID"]; self.sSIDTxt.textFi ...

  6. 关于Android文件Apk下载的那点事

    1.Android文件Apk下载变ZIP压缩包解决方案 如果你的下载服务器为Nginx服务器,那么,在Nginx安装目录下的conf/mime.types文件的对应位置,加上以下一行语句,指定APK文 ...

  7. 《SpringMVC从入门到放肆》六、SpringMVC开发Controller的方法总结

    到目前为止我们已经大概学习了StringMVC的执行流程,以及详细的处理器映射器和处理器适配器的执行流程,并可以自己写一个配置方式开发的小Demo了.今天我们来总结一下实现一个Controller的几 ...

  8. 使用Java客户端操作elasticsearch（二）

    承接上文,使用Java客户端操作elasticsearch,本文主要介绍 常见的配置 和Sniffer(集群探测) 的使用. 常见的配置 前面已介绍过,RestClientBuilder支持同时提供一 ...

  9. makefile编写

    概述 什么是makefile?或许非常多Winodws的程序猿都不知道这个东西,由于那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional的程序猿,makefil ...

  10. spring cloud

    如果是一个大型的网站,内部子系统较多.接口非常多的情况下,RPC框架的好处就显示出来了,首先就是长链接,不必每次通信都要像http 一样去3次握手什么的,减少了网络开销:其次就是RPC框架一般都有注册 ...