CSS - 背景 ¶

背景色
背景图片
背景控制
background属性

作者：KK
发表日期：2016.1.26

背景色 ¶

background-color属性是控制背景色的,比如

body{background-color:red;}

这样就会让整个页面变成红色,red指示了background-color要显示什么颜色的背景,我们可以用其它颜色的英文单词来做颜色,比如green,blue,yellow和white等,还可以用#0A813B这个作为颜色的色值,具体想了解这个色值的话,放心后面有专门的章节讲解

背景图片 ¶

background-image属性是控制背景图片的,比如

body{background-image:url(http://www.kkh86.com/it/html-base/img/img-demo.jpg);}

/*还可以直接引用自己的图片,但这张 photo.jpg 图片是从CSS代码所在文件夹开始找的*/
body{background-image:url(photo.jpg);}
body{background-image:url(family/father.jpg);}

就这样引用了一张网上的图片作为网页的背景图片,其中属性的值是url(http://www.kkh86.com/it/html-base/img/img-demo.jpg),记住要用url()包起来哦

可是你是不是想起了img标签?它也是可以显示图片的.但其实这个CSS的背景图片和img的图片是各有用处的哦,慢慢来不急,继续学吧,时候到了自然会告诉你的啦

背景控制 ¶

其实它已经显露了一个很明显的问题,img标签是不会有这样的情况的----就是它会重复显示,我特意准备了一张不是很大的图片给你测试呢

控制不重复

使用background-repeat属性来,比如
```
body{
	background-image:url(http://www.kkh86.com/it/html-base/img/img-demo.jpg); 
	background-repeat:no-repeat;
}
```
这样尽管图片只会显示1次,不会重复铺过去,其实它之所以重复也是因为浏览器会默认为background-repeat:repeat,值是repeat就是重复的意思
控制拉伸
```
body{
	background-image:url(http://www.kkh86.com/it/html-base/img/img-demo.jpg); 
	background-size:contain;
}
```
通过background-size属性设置值为contain实现将图片绽放到整个屏幕

而且还可以设定背景的显示大小,下面这例子将背景图缩小成200像素宽度,90像素的高度,导致背景出现了很多平铺:
```
body{
	background-image:url(http://www.kkh86.com/it/html-base/img/img-demo.jpg); 
	background-size:200px 90px;
}
```
如果不想平铺,记得加background-repeat属性来控制哦
控制偏移

我们可以通过background-position属性控制背景图像的位置偏移:
```
body{
	background-image:url(http://www.kkh86.com/it/html-base/img/img-demo.jpg); 
	background-repeat:no-repeat;
	background-position:50px 100px;
}
```
此时背景图片就不是从body的左上角开始了,而是向下向右偏移了50个像素,再向下偏移了100个像素

background属性 ¶

这里还有一个高级点的写法,可能阅读起来不太顺利,就是

body{
	background:url(http://www.kkh86.com/it/html-base/img/img-demo.jpg) no-repeat 50px 100px;
}

这里只是用了一个叫background的属性,但是它的值是url(http://www.kkh86.com/it/html-base/img/img-demo.jpg) no-repeat 50px 100px,一次性说明了用什么图片,要不要重复,偏移多少像素...以后你会经常看到这种写法,或者有的人单纯地就是懒得写background-image于是直接写background:url(xxx.jpg),反正这是合法正确的