Background

background 简写属性在一个声明中设置所有的背景属性。

Background属性：

一. background-color:颜色值；

颜色值格式：1.十六进制格式：#d8001c;

            2.rgb格式：rgb(216，0，28);

             注：rgba格式：rgba(216，0，28，0.6、5);中的a代表的是透明度，值是

                          0-1之间的小数，0代表完全透明，1代表完全不透明。

二. background-image:url(背景图片的路径及全称)；

网页上有两种图片形式：插入图片、背景图；

插入图片：属于网页内容，也就是结构。

背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。

显示原则：

2.1．容器尺寸等于图片尺寸，背景图片正好显示在容器中;

2.2．容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；

2.3．容器尺寸小于图片尺寸，只显示元素范围以内的背景图。

三. background-repeat:no-repeat/repeat/repeat-x/repeat-y;

3.1.no-repeat:不平铺

3.2.repeat：平铺

3.3.repeat-x：横向平铺

3.4.repeat-y ：纵向平铺

四. background-attachment:scroll(滚动)/fixed(固定);

4.1.fixed固定，随内容一块滚动；

4.2.scroll:不随内容一块滚动。

五. background-position:值1    值2;

选择符{background-position:left/center/right/数值  top/center/bottom/数值;}

说明：

两个值 ：值1：表示水平位置的值，值2：表示垂直的位置。

当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。

向右方向，向下方向都是正值。

水平方向上的对齐方式（left/center/right）或值

垂直方向上的对齐方式(top/center/bottom)或值

六. background-size: 数值/auto/cover/contain；(css3新增属性)

6.1 数值(length)：用长度值指定背景图像大小。不允许负值。用百分比指定背景图像大小。不允许负值   。( background-size: w  h; )

6.2 auto：背景图像的真实大小。（默认值）

6.3 cover：当背景图大于容器时，背景图超出容器的部分会被裁剪掉，不显示，只显示容器中的部分。但背景图不会失真。

当背景图小于容器时，背景图会以盒子最长边为准等比放大到填充满整个盒子，盒子不会有留白，但依然只能显示背景图的一部分，背景图而且会失真。

6.4  contain：当背景图大于容器时，背景图会以盒子最短边为准等比缩小到盒子最短边的位置，盒子会有留白，但背景图显示完整，背

      景图不会失真。

当背景图小于容器时，背景图会以盒子最短边为准等比放大到盒子最短边的位置，盒子会有留白，背景图显示完整，但背景图会失真。

七. 背景颜色渐变

背景颜色渐变属于CSS3属性，只有两种：径向、线性

7.1径向渐变

background:radial-gradient(颜色1,颜色2);

半透明过渡到纯色：

background:radial-gradient(rgba(0,0,0,0),green);

例如：background:radial-gradient(rgba(255,255,255,0), green, rgba(255,255,255,0));

7.1线性渐变

background:linear-gradient(top,red,blue);

线性渐变默认从上往下开始

可以给属性值更改渐变开始方向：

left(从左往右)

right(从右往左)

top(从上往下)

bottom(从下往上)

45deg(角度渐变)

知识拓展：CSS黑客（hack）:专门去解决某个浏览器兼容问题。有些浏览器要加上-浏览器-黑客才能实现。

-webkit-    专门给谷歌内核看的

-moz-      专门给火狐看的

-ms-       专门给微软浏览器看的

background:-webkit-linear-gradient(left,red,green,blue);

线性渐变默认从上往下开始。

八. 多背景设置

background:url()no-repeat,url() no-repeat right top;

7.1用逗号隔开每一张图片。

7.2默认图片都在左上角。

7.3如果有颜色，颜色要放到最后面

九. 盒子阴影

box-shadow:水平 垂直 羽化 扩展颜色 inset;

三个值：水平、垂直、羽化

box-shadow最后加上inset就代表盒子内阴影

如果想要四周都有阴影，水平和垂直都设置为0

十. 文字阴影

text-shadow:水平 垂直 羽化 颜色;

多个阴影：text-shadow:0 0 0 yellow,0 0 0 green;

除了恐惧和欲望，还有什么可以激励自己长期地努力？

当你停下脚步的时候，别忘了别人还在奔跑。

世界的温柔 是及时的善意和干净的你

当我拥有你，无论是在百货公司买领带，还是在厨房收拾一尾鱼，我都觉得幸福。

余生就那么长，还请衷于自己。

海已静，山未青，月落于平行时空。长欢已远，迟眠五更，念心事灯火通明。相遇错失，欢悲照旧，我都承蒙。

读书当一意在书，游山水当一意在水，承兴所至，心无旁及。

学问，是一张渔网，一个结一个，结出了捕鱼的工具。

如果只是向往，远方依旧是远方。

为了照亮夜空，星星才站在天空的高处。

生活就像一面镜子，你若对她笑，她就对你笑。

只要朝着一个方向努力，一切都会变得得心应手。加油