饥人谷知识点三：background那些事儿

什么是background？

一个元素的背景是在其content,padding和border下的内容（当然，在新的浏览器里可以通过使用background-clip属性改变背景所占用的区域）

background具有多种不同的属性

• background-color：设置元素的背景色
• background-image：为页面元素指定一个或多个背景图
• background-position：指定背景图片的初始位置
• background-repeat：指定背景图片是否以平铺效果重复出现，以及重复的方式
• background-attachment：决定背景是在视口中固定的还是随包含它的区块滚动的
• background: 将以上五个属性简写在一起
• background-size：设置背景图片大小

background-color

• background-color的默认值是transparent而不是white
• 该属性的使用务必要考虑到浏览器的兼容问题，在编写代码时最好先给一个基础的背景色再去设置比较鲜明的特点

举个例子
html

<p>我想拥有一个背景色</p>

CSS

p{
padding: 20px;
background-color: yellow;
}

以下为结果

background-image

background-image最简单的用法就是url(图片的路径)，这样就会选取一张图片插入到背景区域

p{
padding: 20px;
background-color: yellow;
background-image: url(http://b3.hoopchina.com.cn/images/logo2013/v1/hp_logo_nba.png)
}

以下为结果

额，这个结果看起来并不是很好，背景图片看起来一直在重复且没有美感，这就需要利用以下的属性来修改

注：background只是背景而已，并不是网页内容的一部分，如果想让图片包含网页内容之中的话应该使用img标签

background-repeat

background-repeat的默认值是令图片在水平和垂直方向不断重复直至填满整个元素，其他的值包括

• no-repeat：图片不会重复显示，只会显示一次
• repeat-x：背景图片会沿着水平方向不断重复
• repeat-y：背景图片会沿着垂直方向不断重复

让我们来修饰代码

p{
padding: 20px;
background-color: yellow;
background-image: url(http://b3.hoopchina.com.cn/images/logo2013/v1/hp_logo_nba.png);
background-repeat: no-repeat;
}

以下为结果

这样看起来似乎好一点了，但是背景图片确实覆盖了文本内容，我们可能需要将背景图片重新定一下位

background-position

一般来说，background-position将会取两个值，中间用空格隔开，他指定了图片的XY坐标——定位到图片左上角的点。想象这个背景是一张图片，X坐标从左到右，Y坐标从上到下
属性的取值大致有以下几种

• 绝对值类似像素，比如background-position: 200px 25px;
• 相对值类似rems，比如background-position: 20rem 2.5rem
• 百分比，比如background-position: 90% 25%
• 关键字，比如right center，这两个值比较直观，并且可以分别取左，中，右，和顶部，中部，底部的值

值得注意的是你也可以将这些值混合起来用，比如background-position: 99% center，同时如果只指定了一个值，那这个值代表水平的值，垂直方向的默认为center。
让我们再次修饰我们的代码

p{
padding: 20px;
background-color: yellow;
background-image: url(http://b3.hoopchina.com.cn/images/logo2013/v1/hp_logo_nba.png);
background-repeat: no-repeat;
background-position: 99%;
}

以下为结果

background-attachment

background-attachment指定了当网页的内容滚动时背景如何滚动，他有以下的值

• scroll：背景图像会随着页面其余部分的滚动而移动
• fixed：当页面的其余部分滚动时，背景图像不会移动
• local：背景图像会随着页面其余部分的滚动而移动
• demo

这部分没搞懂...需要高人指点

background简写

在一条语句里面声明多种background属性是可行的，属性与属性之间应该用空格分隔开，比如

background: yellow linear-gradient(to bottom, orange, yellow) no-repeat left center scroll;

我们将我们以上分不同步骤写的代码用一条语句代替

p{
padding: 20px;
background: yellow url(http://b3.hoopchina.com.cn/images/logo2013/v1/hp_logo_nba.png) no-repeat 99%
}

结果和之前的结果完全一样

简写的模板如下

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

background-size

background-size可以允许你修改背景图片的尺寸以更好的适用于你的设计，对于每一张图片，你需要2个参数：水平的和垂直的，例如

p{
padding: 20px;
background: yellow url(http://b3.hoopchina.com.cn/images/logo2013/v1/hp_logo_nba.png) no-repeat 99% / 10%;
}

以下为结果

数值还可以是%和rems等,还可以是cover和contain

• px
• 第一个值设置宽度，第二个值设置高度。
  如果只设置一个值，则第二个值会被设置为 "auto"
• %
• 第一个值设置宽度，第二个值设置高度。
  如果只设置一个值，则第二个值会被设置为 "auto"
• cover
• 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
  背景图像的某些部分也许无法显示在背景定位区域中
• contain
• 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

demo

参考文章：

• Backgrounds

2015.8.16第一次更新