css高度背景怎么填充整屏,004-CSS怎样让背景充满整个屏幕

...Your content goes here...

给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;

}

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

...

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

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

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

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

...

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

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

css中background背景属性概

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

用css实现条纹背景

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

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

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

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

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

第 17 章 CSS 边框与背景[上]

学习要点: 1.声明边框 2.边框样式 3.圆角边框 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．声明边框 边框的声明有 ...

随机推荐

[转]DevExpress.XtraGrid.GridControl gridView自动列宽代码

gridView1.OptionsView.ColumnAutoWidth = false;   for (int I = 0; I < gridView1.Columns.Count; I++ ...

Mysql学习笔记(五)数据查询之测试sql部分。

正文之前,介绍mysql一些很有趣的命令. 快速的创建表,并填充表数据. create table test like  已经有的表名: inset into test select * from f ...

angularjs工具方法

1.angular.extend var dst = {name: 'xxx', country: 'China'}; var src1 = {name: 'yyy', age: 10}; var s ...

Selenium定位一 --单个元素定位方法

Selenium-Webdriver 提供了强大的元素定位方法,支持以下三种方法. 单个对象的定位方法 多个对象的定位方法 层级定位 定位单个元素在定位单个元素时,selenium-webdriver ...

WIndows 7 与 Debian 7 双系统启动引导

以前写有一篇文章是Windows XP下引导Linux的(http://www.cnblogs.com/ibgo/archive/2012/05/20/2510736.html),采用的是grub4d ...

HTML兼容总结

所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+h ...

tomcat无法打开8080页面

tomcat已启动 app已经正常执行 但不能打开8080管理页面 可能是在webapps目录下没有ROOT目录

hdu 5533(几何水)

Input The first line contains a integer T indicating the total number of test cases. Each test case ...

Redis 设计与实现 (七)--事务

事务 *ACID,指数据库事务正确执行的四个基本要素的缩写.包含:原子性(Atomicity).一致性(Consistency).隔离性(Isolation).持久性(Durability) redi ...

C&num;windows服务调试技巧

1.创建项目 2.为了方便调试,设置为控制台程序 3.修改Service1代码 4.修改Main代码 这样当使用-console方式启动时,就是以普通的控制台方式启动,方便调试程序. 5.其它安装之类 ...