CSS3 背景

复习一下背景的基础内容

CSS1和CSS2的背景

背景有5个属性

background-color 背景颜色
background-image 背景图片，通过url("URL")方式指定图片位置。
backgroud-repeat 背景图片展示方式
backgroud-attachment 背景图片固定还是滚动
backgroud-position 背景图片位置

实际中都是采取 backgroud: background-color; [background-image, backgroud-repeat, backgroud-attachment, backgroud-position] 的方式来简写，其中背景颜色如果没有给出图片则必须给。

属性的简单复习：

background-color
- 颜色名
- rgb(r,g,b)，用RGB0-255代表的色彩
- hsl值，如hsl(3,100%,50%),不常用
- CSS3里新增了rgba 和 hsla,a是透明度。
- 背景颜色仅限于元素的内容+padding区域，不会超出边框
background-image
- 用url("URL")指定图片位置，可以用绝对位置或者相对位置
- 背景颜色仅限于元素的内容+padding区域，不会超出边框
background-repeat
- 有四个值可以选
- repea 沿x和y同时平铺
- repeat-x 只沿X轴平铺
- repeat-y 只沿Y轴平铺
- no-repeat 图片不做任何重复铺放
background-attachment
- 有2个值可以选
- scroll 背景图片随着滚动条滚动
- fixed 背景图片固定，这种一般用在html或者body标签上，用在其他标签上不能达到固定效果。经常用来制作那种卷帘的效果。
background-attachment
- 有1-2个值可以选，分别控制x和y，如果只给一个值，则表示x和y相同
- 可以用数值表示像素，百分比和TRBL+center来表示方位
- 移动像素通常用于精灵图。

CSS3新背景属性

background-origin
- 决定background-position的参考原点，默认是左上角，有了这个参数可以灵活定位
- 有三个值，padding-box, border-box 和 center-box
- padding-box表示从不含边框的左上角开始显示，和原本背景默认显示一致
- border-box 表示从边框的左上角开始显示，背景图会被边框压住
- center-box，表示从实际的内容区左上角开始显示，Chrome中该属性是center-box
- 这个其实很好用，因为图片背景默认是充满padding+元素区域，有了这个属性可以更灵活的排布背景。
background-clip
- 剪切图片背景
- 很多时候可能看到图片比背景大，充满了整个元素，实际上，默认的图片是完全显示的，只不过超出边框的部分不显示，但还是存在的，所以缩小padding对于背景图片没有任何效果。有了这个属性之后，就可以真的让图片只在固定的区域内显示，超出的部分不再影响到其他部分。
- 这个属性和background-origin很类似，也有三个值，padding-box, border-box 和 center-box，效果也是一样的
- padding-box表示图片从不含边框的左上角开始显示，超出部分会被剪裁掉
- border-box 表示从边框的左上角开始显示，超出部分会被剪裁
- center-box，表示从实际的内容区左上角开始显示，超出部分会被剪裁
- 通过一个例子来看一下：
```
div {
    height: 200px;
    margin: 20px;
    padding: 30px;
    border: 10px dashed rgba(0,0,10,1);
    background: url("images/test.png") no-repeat;
    background-origin: border-box;
    background-clip: content-box;
}
                
```
  把origin属性设置为border-box，也就是背景图的默认状态，设置clip分别为3种样子，可以看到背景图的所剩范围在不断缩小。
background-size
- 有五个参数可以选择,CSS3之前如果选择了过大的背景图，很难调整尺寸，一般做法都是让背景图和宽高相同，但如果带有边框，还需要细调，现在可以直接控制背景图的大小
- auto，表示默认值，保持背景图片的原始宽度和高度。
- 具体像素值，直接修改背景图大小。
- 百分比，改变背景图大小，这个百分比是相对于元素的宽度，改成100%就是自适应宽度。
- cover，放大背景图充满整个元素,会失真，到了一定程度就不再自动缩放
- contain，保持背景宽高比例，缩放到宽度或者高度正好适应元素。
- 文字的值不能同时给出。如果设置为像素值和百分比的时候可以设置1或2个值，如果只给1个相当于指定宽度，第二个参数自动为auto。如果指定2个值则可以改变图片比例。

前端开发 CSS3 – 背景

CSS3 背景复习一下背景的基础内容 CSS1和CSS2的背景背景有5个属性 background-color 背景颜色 background-image 背景图片，通过url("URL")方式指定图片位置。 backgroud-repeat 背景图片展示方式 backgroud-attachm

CSS3 背景

CSS1和CSS2的背景

CSS3新背景属性