# 背景

定义元素的背景颜色、图片的展现形式，缩写

background：color img_url repeat attachment position / size;
background:#f00 url(background.jpg) no-repeat fixed 0 0 / 50px 50px;

如果不设置其中的某个值，也是允许的，例如：

background: #f00;

小提示：在首页的全屏banner中，一般使用 background 实现。

属性知识点：

• 背景颜色 background-color
• 背景图片 background-image
• 背景重复 background-repeat
• 背景定位 background-attachment
• 背景位置 background-position
• 定位方式 background-origin

# 背景颜色 color

定义背景的颜色

background-color: #f5f5f5;

# 背景图片 image

定义背景的图片（可以使用渐变函数）

background-image: url(background.jpg); //图片
background-image: linear-gradient(#fb3 ,#58a); //渐变函数

# 背景重复 repeat

定义背景重复方式，默认值为 repeat 水平和垂直重复。

background-repeat: no-repeat;

# 背景定位 attachment

定义背景图像是否固定或者随着页面的其余部分滚动，可选值为 scroll(默认值)、fixed(固定)

background-attachment: fixed;

一般配合背景图片使用，使背景图展示内容不随着页面的其余部分滚动。

# 背景位置 position

定义背景图像的起始位置

background-position: center;
background-position: 10px 10px;

如果您仅规定了一个关键词，那么第二个值将是"center"。

# 背景大小 size

定义背景图片的尺寸，可选值为 长度、百分数、cover、contain

• cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
• contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

background-size: cover;

长度、百分数中，如果只设置一个值，则第二个值会被设置为 "auto"。

# 背景定位方式 origin

定义规定 background-position 属性相对于什么位置来定位

background-origin: content-box;

如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果

# 背景区域 clip

定义对背景（图片和背景色）的切割

注意是裁切

background-clip: content-box; // 这样的话在 padding的区域将没有背景图片及颜色

# 背景与边框

# 半透明边框

display: inline-block;
height: 200px;
width: 200px;
background: #fff;
border:10px solid hsla(0,0%,100%,.5);
background-clip: padding-box;

# 多重边框

• box-shadow方案：

display: inline-block;
height: 200px;
width: 200px;
background: #ccc;
box-shadow: 0 0 0 10px hsla(0,0%,100%,.7),
            0 0 0 20px hsla(0,0%,100%,.6),
            0 0 0 30px hsla(0,0%,100%,.5);

• outline方案：

display: inline-block;
height: 200px;
width: 200px;
background: #fff;
border:10px solid #35b558;
outline: 10px solid hsla(0,0%,100%,.4);

# 背景与定位

• background-position 扩展语法:

display: inline-block;
height: 200px;
width: 200px;
background:#fff linear-gradient(#fb3 ,#58a) no-repeat right 10px bottom 10px / 100px 100px;

• background-origin 方案：

display: inline-block;
height: 200px;
width: 200px;
padding: 10px;
background:#fff linear-gradient(#fb3 ,#58a) no-repeat right  bottom  / 100px 100px;
background-origin: content-box;

• background-positon-calc( )方案：

display: inline-block;
height: 200px;
width: 200px;
background:#fff linear-gradient(#fb3 ,#58a) no-repeat 0 0/ 100px 100px;
background-position: calc(100% - 20px) calc(100% - 20px);

# 边框内圆角

display: inline-block;
height: 200px;
width: 200px;
background:tan;
border-radius: 10px;
box-shadow:0 0 0 10px #655;
outline: 10px solid #655;

# 条纹背景

• 双色：

display: inline-block;
height: 200px;
width: 200px;
background: linear-gradient(#fb3 50%,#58a 50%);
background-size: 100% 20px;

• 三色：

display: inline-block;
height: 200px;
width: 200px;
background: linear-gradient(#fb3 33.33%, #58a 0,#58a 66.66%,#35b558 0);
background-size: 100% 20px;

• 垂直：

display: inline-block;
height: 200px;
width: 200px;
background: linear-gradient(to right,#fb3 50%,#58a 50%);
background-size:20px 100% ;

• 斜向：

display: inline-block;
height: 200px;
width: 200px;
background: linear-gradient(45deg,#fb3 25%, #58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
background-size:30px 30px ;

• 同色系：

display: inline-block;
height: 200px;
width: 200px;
background: #fb3;
background-image: 
    repeating-linear-gradient(30deg,
    hsla(0,0%,100%,.2),
    hsla(0,0%,100%,.2) 15px,
    transparent 0,
    transparent 30px)

# 背景图案

• 网格：

display: inline-block;
height: 200px;
width: 200px;
background: white;
background-image: 
    linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),
    linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
background-size: 20px 20px;

• 细网格：

display: inline-block;
height: 200px;
width: 200px;
background: #58a;
background-image: 
    linear-gradient(white 1px,transparent 0),
    linear-gradient(90deg,white 1px,transparent 0);
background-size: 20px 20px;

• 波点：

display: inline-block;
height: 200px;
width: 200px;
background: #655;
background-image:
    radial-gradient(tan 30%,transparent 0),
    radial-gradient(tan 30%,transparent 0);
background-size: 20px 20px;
background-position:0 0 , 30px 30px;

• 棋盘：

display: inline-block;
height: 200px;
width: 200px;
background: #eee;
background-image:
    linear-gradient(45deg,#bbb 25%,transparent 0),
    linear-gradient(45deg,transparent 75%,#bbb 0),
    linear-gradient(45deg,#bbb 25%,transparent 0),
    linear-gradient(45deg,transparent 75%,#bbb 0);
background-size: 20px 20px;
background-position: 0 0 ,10px 10px,10px 10px,20px 20px;

• 伪随机背景：

display: inline-block;
height: 200px;
width: 200px;
background-image:
    linear-gradient(90deg,#fb3 11px,transparent 0),
    linear-gradient(90deg,#ab4 23px,transparent 0),
    linear-gradient(90deg,#655 41px,transparent 0),
    linear-gradient(90deg,transparent 75%,#bbb 0);
background-size: 41px 100%,61px 100%,83px 100%;

# 连续图像边框

display: inline-block;
height: 200px;
width: 200px;
border:20px solid transparent;
background: 
    linear-gradient(white,white),
    linear-gradient(#fb3 ,#58a);
background-size: cover;
background-clip: padding-box,border-box;
background-origin: border-box;

# 资源

• 渐变
• background-origin和background-clip的区别