CSS background属性组

1. 请写出与尺⼨有关的css属性?

w尺寸css属性：一共有11个

• height 高
• min-height 最小高度
• max-height最大高度
• line-height行高
• width宽
• min-width最小宽度
• max-width最大宽度
• margin外边距
• padding内边距
• border边框
• font-size字体大小

尺⼨属性值的单位有哪些？

分为两类：
1.绝对单位（一共5个）px，cm,mm,pt,inch
2.相对单位（一共5个）%,em,rem,vh,vw
绝对单位：

• px（pixel）像素，是数字世界里常用的长度单位；
• cm:厘米
• mm:毫米
• pt:磅
• inch（in）：英寸

相对定位：参照父级元素进行计算；

• %：百分比（参照父级元素进行计算）
• em：参照当前元素的font-size计算
• rem：参照html的font-size计算
• vh：表明视口（viewport）高度的百分之一;v:表明：vieport；h：表明：height
• vw：表明视口（vieport）宽度的百分之一；v：表明vieport；w：表明：width

背景色覆盖到哪个区域停止？

答：边框

背景颜色值的写法有几种？

1.16进制
2.英文单词
3.rgb（red，blue，alpha）
alpha：不透明度
rega（0-255，0-255，0-255，0-1）
4.hsl（0-360，0%-100%，0%-100%）
hsla（色相，饱和度，明度，不透明度）

与背景有关的属性

背景属性一共有8个(外加两个一起为10个)：

• 1.设置背景颜色,
• 2.设置图片源,
• 3.设置背景图片,
• 4.设置背景图片起始位置(设置背景图片位置),
• 5.设置背景图片重复位置,
• 6.设置图片截切,
• 7.设置背景图片固定性,
• 8.设置背景尺寸大小,
• 9.多背景，
• 10.设置背景渐变色。

1.设置背景颜色：

属性定义：用于定义背景色
语法：

body{
background-color：url（  ）
}

2.设置图片源：

语法：

• 1.background-origin：border-box ；
  缩放到边框大小，修改坐标。
• 2.background-origin：padding-box ；
  缩放到内边距大小，修改坐标。
• 3.background-origin： content-box;
  缩放到内容大小，修改坐标。

3.设置背景图片

属性定义：设置背景图片
语法：background-image：url（）

4.设置背景图片起始位置(设置背景图片位置)

语法：backround-position
可以设置三种值：px像素，%百分比，left ，rigth，bottom，top，center（关键字）

5.设置背景图片重复位置

语法：

• background-repeat：repeat 默认重复
• background-repeat：repeat-x 水平重复
• background-repeat：repeat-y 垂直重复
• background-repeat：no-repeat 不重复

6.设置图片截切

语法：

• background-clip: border-box;
  默认采用border-box，在边框区域渲染。
• background-clip: content-box;
  指定为content-box;，在内容区渲染。
• background-clip: padding-box;
  指定为：padding-box;在内容区渲染。

7.设置背景图片固定性

语法：
1.background-attachment: scroll;//默认值
背景图跟主视口一起移动，不跟元素视口一起移动。

background-attachment: fixed;
背景图固定，无论是主视口还是元素视口背景都不会动。
background-attachment: local;
本地图片跟随元素视口和主视口一起动。

8.设置背景尺寸大小

语法：
1.background-size : px，%， auto;
使用长度，百分比或auto定义尺寸时，需要两个参数，
第一个是图像的宽，第二个是图像的高。如果只有一个值，则第二个是auto.

9.多背景

语法：
1.background-image: url(),url();
多张背景图用逗号隔开。

10.设置背景渐变色

语法：
background-image
渐变色分为3个属性：线性渐变，径向渐变，角度渐变。

1.线性渐变：指两种颜色之间按照直线方式平滑过度。

• 线性渐变属性语法：
  background-image: linear-gradient（渐变角度，列表颜色）//颜色列表停顿位置（stop）//狡辩角度默认180° 0°。

2.径向渐变：指两种颜色之间按照射线方式平滑过渡。

• 径向渐变属性语法：
  1.background-image: radial-gradient（渐变形状（circle ，ellipse）at 渐变位置，颜色列表）；

2. background-image: radial-gradient（渐变大小，颜色列表）；

3.角度渐变：指两种颜色之间按照360°旋转方式平滑过渡。

• 角度渐变属性语法：
  background-image: conic-gradient（from 角度，颜色列表）
  background-image: conic-gradient（at 位置，颜色列表）

视口是什么？

• pc端：网页可视宽度
• 移动端：渲染网页的区域

像素是什么？

• 像素单词：pixel，一般是0.3mm
• 像素是会发光的二级管（像素管）
• 发为两种：
• 物理像素：物理像素反馈的是真实的二极管（像素板）
• 逻辑像素：虚拟的信息（颜色值，坐标）