内容简介：《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>
效果：
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
关注微信公众号
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Mathematica Cookbook
Sal Mangano / O'Reilly Media / 2009 / GBP 51.99
As the leading software application for symbolic mathematics, Mathematica is standard in many environments that rely on math, such as science, engineering, financial analysis, software development, an......一起来看看 《Mathematica Cookbook》 这本书的介绍吧!
