点此查看所有教程、项目、源码导航
本文目录
1. 前言2. 设置背景色3. 设置背景图片4. 背景图平铺4.1 不平铺4.2 水平平铺4.3 垂直平铺4.4 两个方向平铺 5. 背景定位6. 背景简写7. 小结1. 前言
之前讲了文本和字体，用来设置文字相关的样式。
本篇讲述下背景的用法，包括背景色、背景图像、背景图像的平铺方式、背景图像的定位，以及整个背景样式的简写方式。
2. 设置背景色
我们可以通过background-color给标签设置背景颜色，例如：
<div style="background-color: yellow;"><p>春眠不觉晓</p><p>处处闻啼鸟</p><p>夜来风雨声</p><p>花落知多少</p></div>
上述代码我们就为div区域设置了黄色的背景色，所以效果如下：
3. 设置背景图片
如果觉得背景色不够好看，还可以找一张图片作为背景图，就想我们电脑或者手机的壁纸一般。
我们在images文件夹下放置一张2.jpg，然后通过background-image来设置背景图。
<div style="background-image:url(images/2.jpg);"><p>春眠不觉晓</p><p>处处闻啼鸟</p><p>夜来风雨声</p><p>花落知多少</p></div>
效果如下，可以发现虽然背景图显示出来了，但是重复显示了很多张，并不好看。
4. 背景图平铺
我们可以通过background-repeat属性来设置背景图的平铺方式。
什么叫平铺呢，就是图像在窗口上是如何铺设的，是横向一张一张的铺，还是不平铺只展示一张图片，还是纵向的一张一张的铺。
4.1 不平铺
可以选择让背景图不平铺，使用background-repeat:no-repeat即可。
<div style="background-image:url(images/2.jpg);background-repeat: no-repeat;"><p>春眠不觉晓</p><p>处处闻啼鸟</p><p>夜来风雨声</p><p>花落知多少</p></div>
效果如下，此时背景图只显示一张，不会重复。
4.2 水平平铺
使用background-repeat:repeat-x;，可以设置水平平铺，效果如下：
4.3 垂直平铺
使用background-repeat:repeat-y;，可以设置垂直平铺，效果如下：
注意垂直平铺，得当垂直方向的高度超出背景图高度时，才需要重复，所以我们多些了一些诗句，将高度撑的更高一些。
4.4 两个方向平铺
如果是默认不写，则是水平、垂直方向都会平铺，效果如下：
5. 背景定位
可以使用background-position改变图像在背景中的位置，例如：
<div style="background-image:url(images/2.jpg);background-repeat: no-repeat;background-position: right top;"><p>春眠不觉晓</p><p>处处闻啼鸟</p><p>夜来风雨声</p><p>花落知多少</p></div>
将图像位置设置为了右侧、上方，所以效果如下：
6. 背景简写
背景相关的样式比较多，如果逐一写下来，还是挺费劲的，所以还有一种简写方法，如下：
<div style="background:yellow url('images/2.jpg') no-repeat right top;"><p>春眠不觉晓</p><p>处处闻啼鸟</p><p>夜来风雨声</p><p>花落知多少</p></div>
一个background样式名，同时设置了背景色、背景图、平铺方式、定位。
这种写法更简单，也更常见！
7. 小结
背景图经常会用在登录界面，选择一张大图片，当做整个界面的背景(为body标签设置背景即可)。
大家可以尝试下使用背景图设计一个好看的登录界面。
