1. 原理：由于给网页设置背景图时，需要设置背景图不重复且充满整个浏览器屏幕，给body标签指定背景图，这样背景图就可以填充整个浏览器viewport了。其实，该方案对所有的块级容器都可以生效。块级容器的宽高是动态的，那么背景图将自动伸缩，充满整个容器。
2. 可设置body标签的CSS样式如下：
body{
/*加载背景图*/
background-image：url（./images/background.jpg）;
/* 背景图垂直、水平均居中 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
background-attachment: fixed; //此条属性必须设置否则可能无效/
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色，背景图加载过程中会显示背景色 */
}
.box{
width: 600px;
height: 600px;
border: 1px solid red;
background: url("./images/QQon5.gif") no-repeat; //在这里可以进行更改
}
添加背景图片有四种常用的方式，分别是：
repeat 完全平铺
repeat-x 横向平铺
repeat-y 纵向平铺
no-repeat 不平铺
===========================================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基本选择器</title>
<style type="text/css">
/*h2{
font-family:宋体;
font-size:22px;
text-decoration:underline;
}
p{
font-size:12px;
}*/
.red{
color:red;
}
.green{
color:green;
}
.font18{
font:18px;
}
</style>
</head>
<body>
<h2 class="green">CSS基本选择器</h2>
<p>标签选择器</p>
<p class="red font18">类选择器</p>
<p>ID选择器</p>
<p>通用选择器</p>
<h2 class="green">CSS基本选择器</h2>
<p>标签选择器</p>
<p class="red font18">类选择器</p>
<p>ID选择器</p>
<p>通用选择器</p>
</body>
</html>
========================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style type="text/css">
.red{color:red;}
.green{color:green;}
.font22{font-size:22px;}
p{
text-decoration:underline;
font-family:"微软雅黑";
}
</style>
</head>
<body>
<h2 class="red">二级标题文本</h2>
<p class="green font22">段落一文本内容</p>
<p class="red font22">段落二文本内容</p>
<p>段落三文本内容</p>
</body>
</html>
============================================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>音乐播放页面</title>
<link rel="stylesheet" href="style08.css" type="text/css" />
</head>
<body>
<div id="box-video">
<video src="video/mailang.webm" autoplay="autoplay" loop>浏览器不支持video标签</video>
<div class="cd">
<div class="center"></div>
</div>
<div class="song">
<h2>风中的麦浪</h2>
<p>爱过的地方<br/>当微风带着收获的味道<br/>吹向我脸庞<br/>想起你轻柔的话语<br/>曾打湿我眼眶<br/>嗯…啦…嗯…啦…<br/>我们曾在田野里歌唱<br/>在冬季盼望<br/>却没能等到阳光下</p>
<audio src="http://yinyueshiting.baidu.com/data2/music/123303367/1241435144815766164.mp3?xcode=040035f9879b39136f333bb99c6701d9" autoplay="autoplay" loop ></audio>
</div>
</div>
</body>
</html>
=========================================================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>传智学院简介</title>
</head>
<body>
<h2 align="center">传智播客设计学院简介</h2>
<p align="center">更新时间：2015年07月28日14时08分 来源：传智播客</p>
<hr color="#FF0000" size="5px" >
<p><b>传智播客设计学院</b>专注于平面设计师、网页设计师、UI设计师的培养。我们拥有专业的师资团队，清晰合理的课程架构，4个月的学习循序渐进、充实饱满，结合大量的案例和实战项目，毕业后相当于两年工作经验。</p>
<p><b>传智播客设计学院</b>教给你的远远不止如何作图，在这里你将学到真正的设计素养和理念，成为平面、网页、UI设计都精通的全能设计师。</p>
<p>迄今为止<strong>传智播客设计学院</strong>已经培养出了上万名设计师，遍布于各个大中型企业，同时，从传智播客走出去的学员也得到了各个企业的一致认可和好评。</p>
</body>
</html>
#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=
本文来自博客园，作者：凡是过去，皆为序曲，转载请注明原文链接：https://www.cnblogs.com/longhai3/p/15888011.html
如有疑问，欢迎提问
#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=#+=
