内容简介：《HTML+CSS+JS 网页制作》- 背景样式
本章节介绍背景相关的几个重要的样式，分别是背景颜色样式background-color、背景图像样式background-image、背景重复样式background-repeat以及背景的复合样式background。
背景颜色样式background-color
在CSS中设置背景的颜色是通过background-color样式的，其语法为：
background-color:颜色取值
其中这个颜色取值跟前一章节学的color样式的取值是一样的，即用十六进制数来设置颜色。
例如：
<!doctype html>
<html>
<head>
<title>背景样式</title>
<meta charset="utf-8">
<style>
body{background-color:#0099CC;}
.word{font-family:楷体;font-size:20px;font-weight:bold;color:#FFFFFF;}
</style>
</head>
<body>
<div class="word">通通学 - 知识学习与分享的平台</div>
</body>
</html>
效果：
背景图像样式background-image
在网页设计时，需要背景图像来美化网页，此时就需要用到background-image样式，语法：
background-image:url(图像的地址)
注意：图像的地址可以是绝对地址，也可以是相对地址
例如：
<!doctype html>
<html>
<head>
<title>背景样式</title>
<meta charset="utf-8">
<style>
.word{font-family:楷体;font-size:20px;font-weight:bold;color:#FFFFFF;}
body{background-image:url('./image.jpg');}
</style>
</head>
<body>
<div class="word">通通学 - 知识学习与分享的平台</div>
</body>
</html>
效果：
背景重复样式background-repeat
通过background-repeat样式可以设置图像是否平铺，同时可以设置平铺方式，语法：
background-repeat:取值
该取值分别有以下情况：
no-repeat:表示背景图像不平铺；
repeat：表示背景图像平铺满整个网页；
repeat-x：表示背景图像只在水平方向平铺；
repeat-y：表示背景图像只在垂直方向平铺。
例如：
<!doctype html>
<html>
<head>
<title>背景样式</title>
<meta charset="utf-8">
<style>
.word{font-family:楷体;font-size:20px;font-weight:bold;color:#FFFFFF;}
body{background-image:url('./image02.png');background-repeat:repeat-x;}
</style>
</head>
<body>
<div class="word">通通学 - 知识学习与分享的平台</div>
</body>
</html>
效果：
背景的复合样式background
背景的复合样式background就是将上述的3个样式，一起写在一个样式上，简化样式方式，语法：
background:取值
注意：取值是包括背景颜色、背景图像、背景重复样式，各值之间用空格隔开。
例如：
<!doctype html>
<html>
<head>
<title>背景样式</title>
<meta charset="utf-8">
<style>
.word{font-family:楷体;font-size:20px;font-weight:bold;color:#FFFFFF;}
body{background:#0099CC url('./image02.png') no-repeat;}
</style>
</head>
<body>
<div class="word">通通学 - 知识学习与分享的平台</div>
</body>
</html>
效果：
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
关注微信公众号
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
硅谷百年史
[美]阿伦·拉奥(Arun Rao)、[美]皮埃罗·斯加鲁菲(Piero Scarruffi) / 闫景立、侯爱华 / 人民邮电出版社 / 2014-4-1 / 99.00
一百多年来，仅硅谷就培育了50多位诺贝尔奖获得者，以及无数依靠智慧和知识而成为百万富翁的人。这一人类历史上最伟大的科技创新与创业历程为什么会发生在硅谷？究竟是如何发生的？其他地方是否可以复制出“硅谷”？ 《硅谷百年史——伟大的科技创新与创业历程(1900-2013)》以编年体的顺序，从无线电技术、晶体管、集成电路，到人类基因组、互联网和云计算，详尽地记述了硅谷在100多年中所发生的重大科技事......一起来看看 《硅谷百年史》 这本书的介绍吧!
