background-color
背景颜色， 可以使用十六进制、rgb、rgba表示。
语法
/**selector 背景元素的原则去*//** color 背景颜色的值， 可以是 颜色名称、十六进制值、RGB、RGBA*/selector { background-color: color;}示例
/** 设置body标签背景为白色 */body { background-color: white;}/**设置h1标签背景为红色*/h1 { background-color: #ff0000;}/**设置p元素背景颜色为黄色*/p { background-color: rgb(255, 255, 0);}/**设置背景颜色为半透明的蓝色*/div { background-color: rgba(0, 0, 255, 0.5);}background-image
背景图片；该属性可以通过图片路径引用一张外部图片。图片路径可以是相对论路径、绝对路径也可以是网络当中图片，支持HTTP协议。
语法
/**selector 表示选择器*//**url 图片路径*//**相对路径是书写位置到图片位置的相对路径*/selector { background-image: url(url);}示例
创建一个网页， 使得body、h1、div 拥有不同的背景图片
背景图片演示 /**相对路径， images目录下必须要有 background-body.jpg 图片*/ body { background-image: url("images/background-body.jpg"); }/**引用网络当中的图片*/ h1 { width: 100px; height: 100px; background-image: url(""); } /**使用 linear-gradient 渐变函数*/ div { width: 100px; height: 100px; background-image: linear-gradient(to right, red, orange, yellow); } 线性渐变
background-image属性可以使用 linear-gradient()形式创建线性渐变背景。
background-image: linear-gradient(to right, blue, red) 渐变方向 开始颜色 结束颜色#渐变方向也可以用度数表示background-image: linear-gradient(45deg, blue, red)#可以有多个颜色值background-image: linear-gradient(to right, blue, yellow 20%, red)表示中间色
linear-gradient 的详细用法可以参考 地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient
backgroud-repeat 重复方式
background-repeat 属性用来设置背景的重复模式。
值 意义 repeat; x、y均平铺（默认） repeat-x; x平铺 repeat-y; y平铺 no-repeat; 不平铺
示例
背景是否重复背景展示 div { border: 1px solid red; width: 900px; height: 600px; margin-bottom: 10px; background: transparent url(); } .box1 { background-repeat: repeat; } .box2 { background-repeat: repeat-x; } .box3 { background-repeat: repeat-y; } .box4 { background-repeat: no-repeat; } body { background-image: url(); } box1背景重复(默认) box2背景X轴重复 box3背景Y轴重复 box4背景不重复 background-size 背景尺寸
- background-size 属性用来设置 背景图片的尺寸，兼容到IE9
- background-size 的值可以用像素表示，也可以用百分比表示，表示为盒子宽、高的百分之多少。
- 需要等比例的值，用auto代替。
- contain 特殊值， 背景智能改变尺寸以容纳到盒子里， 可能背景会出现空白区域。
- cover 特殊值， 将背景图片智能改变尺寸以撑满盒子。
/* 设置一个值， 此时代表的是背景图片的宽度，高度默认auto*/background-size: 50%;background-size: 3.2em;background-size: 12px;background-size: auto;/* 第一个值设置宽度，第二个值设置高度 */background-size: 50% auto;background-size: 3em 25%;background-size: auto 6px;background-size: auto auto;
示例
背景大小设置 /* background-size 使用 auth */ .box1 { width: 500px; height: 300px; border: 1px solid #000; background-image: url(); background-size: 300px auto; margin-bottom: 10px; } /* background-size 使用百分比 */ .box2 { width: 500px; height: 300px; border: 1px solid #000; background-image: url(); background-size: 50% 50%; margin-bottom: 10px; } /* background-size 使用 contain 智能背景图片尺寸，以容纳到盒子里 */ .box3 { width: 400px; height: 300px; border: 1px solid #000; background-image: url(); background-size: contain; background-repeat: no-repeat; margin-bottom: 10px; } /* background-size 使用 cover 智能改变尺寸，以撑满盒子 */ .box4 { width: 400px; height: 300px; border: 1px solid #000; background-image: url(); background-size: cover; margin-bottom: 10px; } background-clip 背景绘制区域
指定背景的绘制区域。
默认情况下，背景被绘制到元素的边框外沿，但是可以通过 background-clip 属性来控制背景的绘制区域。
语法
background-clip: border-box | padding-box | content-box;
border-box: 背景延伸至边框外沿（但是在边框下层）， 默认值。padding-box: 背景延伸至内边距（[padding]()）外沿。不会绘制到边框处。content-box: 背景被裁剪至内容区（content box）外沿。
示例
三种取值的演示
控制背景的控制区域 /* 裁剪到内容区域 */ .box1 { width: 400px; height: 300px; padding: 50px; border: 10px dotted red; background-color: yellow; background-clip: content-box; margin-bottom: 10px; } /* 裁剪至边框区域（包含border） */ .box2 { width: 400px; height: 300px; padding: 50px; border: 10px dotted red; background-color: yellow; background-clip: border-box; margin-bottom: 10px; } /* 裁剪至pading区域（包含padding） */ .box3 { width: 400px; height: 300px; padding: 50px; border: 10px dotted red; background-color: yellow; background-clip: padding-box; } div1 div2 div3background-origin 背景图片定位区域
指定背景图片的定位区域。
默认情况下，背景图片的定位区域是元素的 padding box。但是可以使用 background-origin 属性来控制背景图片的定位区域。
语法
background-origin: border-box | padding-box | content-box;
border-box：背景图片的摆放以 border 区域为参考， 以边框的左上角外沿为基准。padding-box：背景图片的摆放以 padding 区域为参考， 以padding的左上角外沿为基准。content-box：背景图片的摆放以 padding 区域为参考，以 padding内真正的内容的外沿为基准。
示例
background-origin 定位起始位置 /* 背景图片/颜色 从 边框开始（包含边框） */ .box1 { height: 400px; width: 300px; background-image: url(); background-origin: border-box; background-repeat: no-repeat; border: 10px dotted red; } /* 背景图片/颜色 从 内容开始 (包含内容) */ .box2 { height: 400px; width: 300px; padding: 30px; background-image: url(); border: 10px dotted red; background-origin: content-box; background-repeat: no-repeat; } /* 默认 background-origin 是 padding-box background-origin 从 padding 开始（包含padding区域） */ .box3 { height: 400px; width: 300px; padding: 30px; border: 10px dotted red; background-image: url(); background-repeat: no-repeat; /* background-origin: padding-box; */ background-clip: padding-box; } qqqqd background-attachment
background-attachment 决定了背景图像的位置是在视口内固定，或者包含它的区块滚动
值 意义 fixed 背景图像固定在视口中，不随页面滚动而滚动。 local 背景图像会随着元素内容的滚动而滚动，而不是随页面滚动而滚动。 scroll 背景图像会随着页面的滚动而滚动(默认)。
背景定位演示 body { height: 3000px; } .box1 { position: relative; top: 100px; width: 200px; height: 200px; border: 1px solid #000; /* 纵向溢出的内容，用滚动条显示 */ overflow-y: scroll; background-image: url(); background-attachment: scroll; } 内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
内容1
background-position 图片其实位置
精确设置图像的初始位置。属性值可以使用 px 像素描述，也可以用 top、bottom、center、left、right描述图片的位置
/**水平方向 在上， 垂直方向 默认为 center*/background-position: top;/**水平方向 在左， 垂直方向再上 （左上角）*/background-position: left top;/**定义了 水平位置 25% 垂直位置25%。 左上角 定义为 0%， 右下角定义为 100% 100%*/background-position: 25% 75%;/**水平位置 10像素 垂直为 10像素 。 左上角定义为 0px 0px*/background-position: 10px 10px;
示例
背景图片定位位置 .box1 { width: 200px; height: 200px; border: 1px solid black; background-image: url(); background-size: 50% auto; background-repeat: no-repeat; background-position: 0px 0px; } .box2 { width: 200px; height: 200px; border: 1px solid black; background-image: url(); background-size: 50% auto; background-repeat: no-repeat; background-position: top right; } 精灵图技术
将多个小图标放在一个图片上，并使用 background-position 技术只显示其中一个。
优点： 减少http请求次数
缺点： 不方便测量，后期改动麻烦
示例
展示精灵图
网络中搜索随便搜索一张CSS精灵图 https://img-blog.csdnimg.cn/20201101235915402.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xJVUNIVUFOUUkxMjM0NQ==,size_16,color_FFFFFF,t_70#pic_center
使用 PS 测量图标在图片当中的位置
ps中选择切片工具， 选择需要测量的图片后双击，弹出层终的 x、y表示其在图片中的横纵坐标位置。 w、h分别表示图片的宽度和高度
编写代码
指定 background-position: – 376px 0px; （以盒子左上角为原点， 相当于把 图片往左拉动 376 像素，往上拉动 0px ）
css精灵图演示 .dui { position: absolute; top: 100px; left: 100px; width: 37px; height: 42px; border: 1px solid #000; background-image: url(images/jinglingtu.jpeg); background-position: -376px 0px; }
background 合写属性
可以使用 background 属性来同时设置背景颜色、背景图片、背景位置、背景大小等属性。
语法
selector { background: color url(image.jpg) no-repeat center center / cover;}
示例
例如将背景颜色设置为黄色，背景图片为 01.jpg ，不重复，居中对齐 。
background: yellow url(image/01.jpg) no-repeat center center 背景颜色 背景图片 背景重复 背景位置
.zstitle { width: 280px; text-align: center; font-size: 26px } .zsimgweixin { width: 280px } .zsimgali { width: 280px; padding: 0px 0px 50px 0px } .zsleft { float: left } .zsdiv { display: flex } .zs { font-size: 30px } .zspaddingright { padding: 0px 100px 0px 0px } 请关于一下啦^_^
微信公众号
