CSS3-背景

background

CSS中，background是一个复合属性，是以下单属性的符合属性：

• background-color
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment
• background-image

其格式如下

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

background-color

background-color属性设置一个元素的背景颜色。

元素的背景是元素的总大小，包括填充和边界（但不包括边框）。

example:

background-color:yellow;

其属性支持以下内容：

1. 颜色关键值，如：red,blue…
2. Hex颜色值，如：#bbff00…
3. Hex含透明颜色值，如：#ffbb0036;（最后两位表示透明度，ff则为不透明，可省略，则变为普通Hex）
4. RGB颜色值，如：rgb(255,255,255)
5. RGBA颜色值，RGB可透明的颜色值，如：rgba(55,56,125,0.5)，透明度为0.5
6. 特殊值：
   1. currentColor：该值是CSS3新增的一个颜色关键字，等会详细介绍。
   2. transparent：透明背景
7. 全局变量：
   1. inherit：继承上一级的背景颜色。（注意，该值可用于所有的CSS属性）
   2. initial：设置背景色的为默认值（每一个CSS属性都有一个默认值，有些为none，则设置没有效果），此属性可用于清除父级的继承属性。如p标签中的span标签的文字颜色继承问题。
   3. unset：如果unset 的CSS关键字从其父级继承，则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。换句话说这个unset关键字会优先用 inherit 的样式，其次会应该用initial的样式。

currentColor关键字

CSS新增了currentColor关键字

currentColor代表了当前元素被应用上的color颜色值。 使用它可以将当前这个颜色值应用到其他属性上，或者嵌套元素的其他属性上。并且该属性会继承上级属性值。

example1:

.box{
	color:red;
	background-color:currentColor; //此时currentColor=red;
	height:100px;
	width:100px;
}

exmaple2:

.fatherBox{
	color:red;
}

.sonBox{
	background-color:currentColor;//此时currentColor继承父级的color属性，为red
}

background-image

其属性有以下内容：

1. url():该函数接受一个地址作为背景图片的url，可以是本地地址，也可以是网络地址。
2. color值：<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
3. linear-gradient():该函数用于生成一个线性渐变。
4. radial-gradient()：该函数用于生成一个径向渐变。
5. repeating-linear-gradient()：该函数用于生成一个重复的线性渐变
6. repeating-radial-gradient()：该函数用于生成一个重复的线性渐变。
7. 关键字：inherit(从父级继承)

linear-gradient()

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于数据类型，是一种特别的数据类型。

其参数有以下几个：

1. angle：角度，可为以下值：
   1. 角度值deg，如45deg，-120deg,方向递增方向为顺时针方向。
   2. 角度关键字，如，to left，to bottom right，这些关键字等同于相应的角度，如to top = 0deg，to right = 90deg，to bottom right = 135deg

2. color-stop:结束位置颜色值（渐变开始位置）,
   1. 包含颜色及结束位置，如red 30%，blue 50%
   2. 只包含颜色值，如red,rgb(123,45,26)，此时每一个颜色会被设置默认的结束位置值，即按颜色均分该区域。如，red blue = red 0%,blue 100%

值得注意的是，每个颜色结束位置之间的距离就是这两个颜色渐变的距离

如：

1. red 0%,blue 100%，那么红色与蓝色在之间的渐变距离即为100%

2. red 0%,blue 50%,brown 100%，那么红色与蓝色之间的渐变距离则为50%，蓝色与棕色之间的渐变距离也为50%。

仔细思考一下会发现，如果两个颜色之间的渐变距离为0，那么他们之间的就不会有渐变，再利用角度的可改变与多次使用该属性，即可实现绘制图形

比如：

1. 条形背景：

   background: linear-gradient(90deg,rgb(153, 153, 153) 50%,rgb(105, 105, 105) 50%);
   background-size: 20%;
   background-repeat: repeat;

2. 切角效果

   background: linear-gradient(45deg,red 10%,transparent 10%),
            	  linear-gradient(135deg,red 10%,transparent 10%),
           	  linear-gradient(-45deg,red 10%,transparent 10%),
          	  linear-gradient(-135deg,red 10%,transparent 10%);

3. 折角效果

   background:linear-gradient(-135deg,transparent 51%,rgba(0, 0, 0, 0.178)51%) no-repeat 100% 0 / 6em 6em,

   linear-gradient(-135deg,transparent 10%,rgb(169, 169, 233) 10%);

利用其线性切割+重复性，可以实现多种图案，只要想象力足够，唯一需要考虑的就是性能问题，如果通过其绘制过于复杂的线性动画导致页面性能损失，那也是得不偿失的。

radial-gradient()

该函数接受5个属性：

参数	描述	可选值
<size>	整个渐变的尺寸大小，如果设置为circle,则可以在前面通过”100px”，”10%”的格式设置其半径，radius；如果设置为ellipse，则可以在前面通过”100px 200px”,”10% 20%”的格式设置其短半径与长半径的值。	绝对单位数值，如100px。相对单位数值，如20%
<extent-keyword>	此关键字的词用于确定渐变最外侧的边与哪个边相切，或与哪个角相距。实际上也是确定半径，所以也可以通过size属性直接设置半径。	见下表
<shape>	渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。椭圆半径与容器的长宽比例相同。	redius：绝对单位数值，如100px；shape：’circle’,’ellipse’
<position>	渐变圆的圆心位置	一般在前面加上 at 关键字 ， 绝对单位数值，如100px。相对单位数值，如20%
<color-stop>	渐变的颜色及其渐变结束位置	color:Hex值，rgb值，rgba值，颜色关键字；stop：绝对单位数值，如100px。相对单位数值，如20%

关键字

常量	描述	常量	描述
closest-side	渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。	closest-side	渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
closest-corner	渐变的边缘形状与容器距离渐变中心点最近的一个角相交。	closest-corner	渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
farthest-side	与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。	farthest-side	与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
farthest-corner	渐变的边缘形状与容器距离渐变中心点最远的一个角相交。	farthest-corner	渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

radial-gradient()基本应用

example1(自己设置半径)：

 background-image: radial-gradient(100px 150px ellipse at 200px 250px,yellow 50%,red 70%);
background-repeat: no-repeat;

example2(用关键字)：

    background-image: radial-gradient(closest-side ellipse at 200px 250px,yellow 50%,red 70%);
background-repeat: no-repeat;

radial-gradient()高级应用

与radial-gradient一样，如果设置两个结束颜色的渐变距离为0或为负值，则可形成径向切割，以此构成多样化的图形。

如：

example1(内凹角)

background: radial-gradient(100px circle at 0 0,transparent 50%,red 50%);

但是我们一般会想要多个内凹圆角，当我们简单的将多个radial-gradient堆起来就会发现前一个背景无论如何都会把后面的背景给覆盖掉。所以我们最好的办法是结合background-size,backround-position,background-repeat结合起来，形成多个不叠加的背景！

example2(两个内凹角)

background: radial-gradient(100px circle at 0 0,transparent 50%,red 50%) no-repeat 0% 100% / 50% 100%,
 radial-gradient(100px circle at 100% 0,transparent 50%,red 50%) no-repeat 100% 100%/ 50% 100%;

example3(四个内凹角)

   background: radial-gradient(100px circle at 0 0,transparent 50%,red 50%) no-repeat 0% 0% / 50% 50%,
radial-gradient(100px circle at 100% 0,transparent 50%,red 50%) no-repeat 100% 0%/ 50% 50%,
radial-gradient(100px circle at 0 100%,transparent 50%,red 50%) no-repeat 0% 100%/ 50% 50%,
radial-gradient(100px circle at 100% 100%,transparent 50%,red 50%) no-repeat 100% 100%/ 50% 50%;

repeating-linear-gradient()

repeating-linear-gradient() 函数用于创建重复的线性渐变 “图像”。该属性的参数与linear-gradient()相同，所以不在赘述。

由于可以重复的组成背景图形，因此用处更多，条形背景是一个典型的应用。

example1:

background: repeating-linear-gradient(yellow 0%,yellow 10%,black 10%,black 20%);

example2:

    background: repeating-linear-gradient(rgba(255, 255, 0, 0.397) 0%,rgba(255, 255, 0, 0.397) 10%,rgba(0, 0, 0, 0.26)
10%,rgba(0, 0, 0, 0.26) 20%),
repeating-linear-gradient(to right,rgba(255, 255, 0, 0.397) 0%,rgba(85, 243, 36, 0.397) 10%,rgba(0, 0, 0, 0.26)
10%,rgba(0, 0, 0, 0.26) 20%);

repeating-radial-gradient()

repeating-radial-gradient()用于创建多个repeating-radial原点辐射。参数与repeating-radial()一致。

example1:

    background: repeating-radial-gradient(circle at center, rgb(146, 146, 146) 0, rgb(146, 146, 146) 2%, black
2%,black 4%);

渐变综合应用

用渐变生成一个复古胶盘：

.box3 {
  position: relative;
  margin: 100px;
  height: 400px;
  width: 400px;
  color: cadetblue;
  border-radius: 50%;
  background:
    linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0,
    linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%,
    repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
  background-size:50% 100%, 100% 50%, 100% 100%;
}
.box3:after{
   position: absolute;
   top: 50%; left: 50%;
   margin: -35px;
   border: solid 1px #d9a388;
   width: 68px; height: 68px;
   border-radius: 50%;
   box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
   background: #b5ac9a;
   content: '';
}

background-size

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

其参数有以下内容：

| 值 | 解释 | | |
| ——————— | —————————————————————————————————————————————————————————————————————————————————————————- | | |
| <length> | <length> 值，比如10px,10em…指定背景图片大小，不能为负值。 | | |
| <percentage> | <percentage> 值，如10%，指定背景图片相对背景区（background positioning area）的百分比。背景区由background-origin设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。如果attachment 为fixed，背景区为浏览器可视区（即视口），不包括滚动条。不能为负值。 | | |
| auto | 以背景图片的比例缩放背景图片。 | | |
| cover | 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。 | | |
| contain | 缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。 | | |
| inherit/initial/unset | 继承父级该属性的值/默认值/如果unset 的CSS关键字从其父级继承，则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。 | | |

注意，

1. 如果其值为<length>时，则可以分别设置其宽高，如：

   background-size: 50% 25%;

2. 如果background有多个值，那么在background-size就可以有多个值，并且与其一一对应。

   background-size: 50% 25%, contain, 3em; //有3个背景图片

background-origin

background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域.

参数如下：

值	解释
border-box	背景图片的摆放以border区域为参考
padding-box	背景图片的摆放以padding区域为参考
content-box	背景图片的摆放以content区域为参考

下面是效果图：

background-clip

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框或padding下面。

值	解释
border-box	背景延伸至边框外沿（但是在边框下层）。
padding-box	背景延伸至内边距（padding）外沿。不会绘制到边框处。
content-box	背景被裁剪至内容区（content box）外沿。
text	背景被裁剪成文字的前景色。（实验性属性，chrome需加上-webkit-前缀）

下面是效果图：

example:

-webkit-background-clip: text;
color: transparent;
font-size: 200px;

background-position

background-position 为每一个背景图片设置初始位置。 这个位置是相对于由 background-origin 定义的位置图层的。

参数如下：

值	解释
center	用来居中背景图片。
top, left, bottom, right	用来指定把这个项目（原文为 item）放在哪一个边缘。另一个维度被设置成 50%，所以这个项目（原文为 item）被放在指定边缘的中间位置。
<length>	指定相对于左边缘的 x 坐标，y 坐标被设置成 50%。
<percentage>	指定相对于左边缘的 x 坐标，y 坐标被设置成 50%。

该属性可以分别用两个值规定x,y的距离

如：
example1：

background-position：50px 50px;

也可以向自己规定的边的距离：

example2：

background-position: right 50px bottom 50px;

我们也可以使用关键词center来居中背景：

example3：

background-position: center;

如果我们规定一个关键词，另一个关键词则为center：

example4：

background-position: left;

如果我们将距离值设置为负值，那么背景就会偏离出容器内部，延时到容器的外部（不会显示出来）。

example5:

注意：background还可以拆分为background-position-x与background-position-y，用来分别设置x，y轴的距离。虽然这是一个是实验性属性，不过大部分浏览器都实现了该方法，一般不会出问题

background-repeat

background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

其参数包含以下，并且每一个单参数都可以改写成双参数（x,y两个方向）的形式：

| 属性值 | 含义 | 双值 | |
| ——— | ——————————————————– | ——————- | |
| repeat | 默认值，图像在水平方向和垂直方向都重复以填满容器 | repeat repeat | |
| repeat-x | 图像只在水平方向重复以填满容器 | repeat no-repeat | |
| repeat-y | 图像只在垂直方向重复以填满容器 | no-repeat repeat | |
| space | 图像向两端对齐重复以填满容器，多余空间用空白代替 | space space | |
| round | 图像向两端对齐重复以填满容器，多余空间通过图像拉伸来填充 | round round | |
| no-repeat | 不重复，图像只显示一次 | no-repeat no-repeat | |

注意round与space的区别

round通过图片拉伸将容器内部全部填满：

background-repeat: round;

space将对应数量的背景填入容器，多余的空间将background-color的颜色填充。

background-repeat: space;

并且我们可以通过双值的方式，分别设置想，x，y上的重复方式

example1：

background-repeat: space round;

background-attachment

background-attachment CSS 属性决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动。

属性	解释
fixed	此关键字表示背景相对于window窗口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
local	此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
scroll	此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。

fixed的效果：当fixed时，背景图随着容器位置的改变而改变，也就是说背景图是以window位置为基础的（可以想想象为：背景图已经铺满了window，该容器的位置会截取对应位置的一部分作为其背景图）。

local效果：当local时，背景会随着容器的的滚动而滚动，但是其基准任然是容器（随着容器的位置的改变，背景的位置并没有改变）

scroll效果：当scroll时，当我们滚动容器时，背景图不会改变；而且当容器位置改变时，背景图也没有发送改变（相对于容器），也就是说，此时背景是以容器为基准的。

给容器添加滚动条

height:300px;
width:300px;
overflow: scroll;

添加此属性后，无论容器的内容是否超过300px，滚动条都会被添加；

如果设置：
height:300px;
width:300px;
overflow: auto;

那么，如果容器的内容超过300px，滚动条才会被添加。

overflow属性同样是一个复合属性。它是overflow-x,overflow-y两个属性的复合属性。同样的是，overflow可以写两个值：

overflow: auto scroll;

设置x轴为自动，y轴为添加滚动条时。

Last

背景图这一部分的样式很有意思，特别是渐变那一部分，可以组成很多有趣的图形，不过这一部分内容还是多，需要多看多实践，才能深入掌握！