[前端笔记007]CSS布局之背景图片、雪碧图与渐变 -- background-image,CSS-Sprite,gradient

资源

• 推荐zeal:离线文档查看器 https://zealdocs.org/
• 推荐w3c:线上文档 https://www.w3school.com.cn/
• 本笔记参考视频，尚硅谷:BV1XJ411X7Ud
• 我的笔记：https://gitee.com/plusmile/stackedit-app-data.git
• 我的CSS文件：https://gitee.com/plusmile/front-code.git

设置背景图片的样式

• background-image设置背景图片，路径加不加引号都行，可以与background-color同时设置，图片小于元素，图片会自动平铺铺满。例：background-image: url(../00-练习/img/01/1.jpg);
• 设置背景重复方式，可选值：
  1. repeat,默认值，x,y双方向重复
  2. repeat-x 沿x轴重复
  3. repeat-y 沿y轴重复
  4. no-repeat 背景图片不重复
  5. 例：background-repeat: no-repeat;
• background-position 用来设置图片位置，设置方式:
  1. 使用top left right bottom center,必须同时指定两个值，只写一个时，另一个默认center
  2. 直接指定偏移量，水平方向偏移，垂直偏移,使用负值较多
  3. 例：background-position: top center;，background-position: 100px 200px;
• background-clip 设置背景范围,可选值：
  1. border-box 默认值，背景会出现在边框地下边
  2. padding-box 背景只会出现在内边距和内容区
  3. content-box 背景只会出现在内容区
  4. 例：background-clip: content-box;
• background-origin 背景图片偏移量地计算原点,可选值：
  1. padding-box 默认值，从内边距处开始计算
  2. content-box 从内容区开始计算
  3. border-box 从边框处开始计算
  4. 例：background-clip: content-box;
• background-size 设置背景图片大小
  1. 语法：background-size:宽度，高度，单位px或百分比，默认auto
  2. 可选值cover,图片比例不变，将元素占满，可能会遮挡一部分图像
  3. 可选值contain,图片比例不变，在元素中完整显示
  4. 宽度，高度可以只设置一个，另一个等比设置
  5. 例：background-size:cover;
• background-attachmen 背景图片是否跟随元素移动，可选值：
  1. scroll 默认值 会跟着元素移动
  2. fixed 固定在页面中，相对视口定位
  3. 例：background-attachment: fixed;
• 简写属性，background
  1. 可以包括上述地所以属性值，大部分无顺序要求，size需要写在position后面,斜线隔开，clip写在origin后面
  2. 例：background: url(../00-练习/img/01/1.jpg) #bfa center center/contain no-repeat scroll border-box content-box;

雪碧图

• 图片是外部资源,外部资源都需要单独发送加载请求，加载外部资源时按需加载,用的时候才加载
• 这样当第一次图片切换时,会闪一次空白,解决方法是,将图片合一变为雪碧图(CSS-Sprite,也叫精灵图),一起加载
• 雪碧图使用步骤：
  1. 在给定的雪碧图中，确定使用的图标，
  2. 测量图标的大小
  3. 根据测量大小创建元素
  4. 将雪碧图设置为元素的背景图片
• 雪碧图例子，只修改图片位置而不用换图片：

a:link{
	width: 93px;
	height: 29px;
	background-image: url(../00-练习/img/01/1.jpg);
}
a:hover{
	background-position: -93px 0;
}
a:active{
	background-position: -186px 0;
}

渐变

• 渐变,设置背景颜色过渡效果,渐变式图片需要使用background-image来设置
• 线性渐变,颜色延一条直线发生变化,颜色默认情况下平均分布,可以使用起始位置管理分布
  1. 语法:background-image:linear-gradient(to right(方向),颜色1 颜色起始位置,颜色2,...,颜色N)
  2. 方向可选值:to right,to bottom,to top,to left,xxxdeg(表示度数),.2turn
  3. 平铺的线性渐变:repeating-linear-gradient(to right(方向),颜色1 颜色起始位置,颜色2,...,颜色N)，此时background-repeat:no-repeat无效,此属性有兼容性问题
• 圆形渐变,延半径渐变
  1. 语法：background-image:radial-gradient(xxpx xxpx(指定渐变大小) at xxpx(or cneter等) xxpx(指定渐变位置) 颜色1 颜色起始位置,颜色2,...,颜色N),
  2. 默认的中心根据元素形状计算,大小的可选值还有circle,ellipse形状和closest-side,closest-corner,farthest-side渐变的边界等

总结

• 至此CSS的基本语法，已经学的差不多了，接下来会做个小米首页的项目
• 还有些高级用法，之后会补充。