CSS背景

设置背景的显示区域 background-clip

​ 默认值border-box 边框盒的左上角开始

​ padding-box 填充盒的左上角开始

​ content-box 内容盒的左上角开始

 background-clip: border-box ;
background-clip:  padding-box 
background-clip: content-box 

设置背景的渲染区域（定位区域） background-origin

默认值border-box 边框盒的左上角开始

​ padding-box 填充盒的左上角开始

​ content-box 内容盒的左上角开始

background-origin: border-box ;
background-origin:  padding-box;
background-origin: content-box;

opacity：

opacity属性指定了一个元素的不透明度。

取值0~1

背景颜色：background-color

背景图像：background-image

取值:

• url(“图片的位置”)
• 如需要多张图片则需要在url后面加逗号再加url(“图片的位置”)

背景图像-水平或垂直平铺： background-repeat

取值：

• 默认值：repeat
• 不平铺：no-repeat
• 水平平铺：repeat-x
• 垂直平铺：repeat

背景定位：background-position

取值

• 第一个值是x轴的位置或者偏移量
• 第二个值是y轴的位置或者偏移量

关键字：left、right、top、bottom、center

偏移量取值： 10px -10px

背景渲染：background-origin

取值

• border-box（默认值） 边框盒的左上角开始
• padding-box 填充盒的左上角开始
• content-box 内容盒的左上角开始

背景剪切：background-clip

取值

• border-box（默认值） 边框盒的左上角开始

• padding-box 填充盒的左上角开始

• content-box 内容盒的左上角开始

背景固定或滚动：background-attachment

取值

• 不滚动：fixed

• 滚动：scorll

设置背景图片的大小：background-size

如果不设置background-size则背景图片的大小为图片本身的大小

取值

• 如果取一个值则为为宽度的值
• 取两个值则第一个为宽度为宽，第二个为高

渐变色

渐变色（线性渐变、径向渐变）
    linear-gradient（线性渐变）
    radial-gradient（径向渐变）
    第一个参数是方向
    第二个是颜色
线性渐变且平铺
background-image: repeating-linear-gradient(to right（渐变方向）, red 0px 20px（颜色起始位置和结束位置）,green 20px 40px);
径向渐变且平铺：
background:repeating-radial-gradient(skyblue 5%,red 35%,rgb(231, 228, 56) 10%);