复合属性
background
复合属性书写顺序不限，没被设置的值认为是默认值，需要做兼容的属性也可以在之后单独设置。
Q1：bg-size必须写在bg-position之后，并用斜杠分开
Q2：origin和clip如果只设定了一个值则同时应用在两个属性上，如果设定了两个值，则前者为origin，后者为clip
背景颜色
background-color
① 默认值为transparent(透明)，不具备继承性(带有默认样式的元素背景由浏览器自定义修改，可以由
bg-color:initial恢复默认)
② 当与bg-image同时定义时，颜色永远被图片覆盖
③ rgba()、hlsa()、correntcolor设置半透明背景色
④ 不能单独应用CSS3渐变色彩值,linear-graduent(color1,color2)对应的属性时bg-image
背景图像
background-image
① 设置背景图资源，默认值为none
② 这里的图像资源，不单单指通常意义上理解的“图片”（jpg、png···），而是CSS拟定的图像类模型的资源(渐变)
bg-image的设定方法
- url() → 绝对或相对地址制定背景图像
- url() → Base64编码设置背景图像
往往是很小的图片（例如平铺背景图）会用第二种方式，其目的是减少页面http请求数 - gradient() → 指定各种渐变形式作为背景图
目前包括linear-gradient、repeating-linear-gradient、radial-gradient、repeating-radial-gradient（线性渐变、镜像渐变）
登陆腾讯云中云的小图标不是base编码，而是一种svg文件
- url(1),url(1),url(1) → 群组值设置多重背景资源
群组值叠盖关系：前者叠加在后者之上，以此类推
实例：设置渐变背景图
方法：引入背景图片以后在其上覆盖一个渐变背景图
.box{
background-image:radial-gradient(transparent 30%,black 60%),url(image.jpg)
}
背景图像如何铺排填充
background-repeat
bg-repeat的值
- repeat（默认）水平垂直方向均平铺图像
- repeat-X 水平方向平铺图像
- repeat-Y 垂直方向平铺图像
- no-repeat 图像不平铺
- space<CSS3> 图像以相同间距平铺并填满容器的某个方向
① 图像本身保持原尺寸不变
② 用等分间距来控制背图平铺，以容器四周边缘为基准对齐，多出来的空间由空白代替 - round<CSS3> 图像自动缩放直到自定义充满整个容器
图像根据需求自适应缩放（不同浏览器判断可能会有差异）
缩放并不是等比关系，图片可能变形
CSS3的变化
① 允许提供两个参数：第一个定义水平，第二个定义垂直
② repeat-X和repeat-Y无法与其他值搭配使用
③ 主要用于新增值space和round的搭配控制
背景图像随内容滚动或者固定
background-attachment
background-attachment的值
- scroll(默认值)
背景图相对于元素自身固定，元素移动背景移动 - fixed
背景图相对于浏览器窗口固定
overflow设置溢出auto哪个方向溢出就增加一个滚动条 - local<CSS3>
背景图相对于元素里面的内容固定，元素内容移动背景图跟着移动
实例：翻滚的可乐罐
- 外部有一个容器实现滚动效果
- 里面有一个容器装透明的罐子图片
- 容器需要有一个固定的罐子背景
背景图像的位置
background-position
值的范围
- 关键词
- 偏移量
值的设定
CSS：可以设定两个值，分别代表水平距离坐标和垂直距离坐标
- 只写一个值，默认第二个值为center
- 可以设置负值
CSS3：设定四个值
- 关键词+偏移量 两个值为一组，代表一个方向
- 偏移量前必须有关键词
相关属性
background-position-x
background-position-y
兼容性不好，一般也用不上
实例：自适应拉伸的带背景文本域
容器尺寸可变化
背景图相对融合其固定
背景图起始点
background-origin<CSS3>
background-origin用于指定背景图的起始位置在盒模型的哪个盒子中
属性的值：三个盒子
content-box 内容盒子
padding-box 内边距
border-box 边框
①当bg-attachment的值为fixed时无效
②对bg-color无效
背景图裁剪
background-clip<CSS3>
① 对背景色、渐变值、背景图均有效
② 裁剪范围是被覆盖区域之外的范围，因此图像可视区域会变小而非移动位置
③对文档的根元素<html>无效（当<html>的属性未设置时，<body>往往是被默认的值）
属性的值
border-box 默认值，背景覆盖整个盒子区域
padding-box 背景仅覆盖padding区域
content-box 背景仅覆盖content区域
text webkit引擎下的特有值，背景仅覆盖文字区域
实例：边框半透明弹窗
text值的用法
- 在webkit引擎下，可以定义值为text，让裁剪区域限制于容器中的文本内，让背景图呈现在文本区域内，实现用图像来填充文本的效果
- 需要使用webkit写法来描述属性
-webkit-background-clip: text;//图片裁剪在文字内
-webkit-text-fill-color: transparent;//文本文字透明
实例：虚线相框
虚线的设置
照片的定位
用clip实现背景图区域的设置
用origin控制背景图起始点
用position精确控制图片位置
背景图像的尺寸大小
background-size<CSS3>
属性的值
auto 默认值，保持背景图的原始高度和宽度
数值（带单位） 定义背景图具体的宽度和高度，允许设置一个值或两个值（第一个值代表宽度，第二个值代表高度，只写一个值时宽度为设定宽度，高度为根据设定的宽度等比设置的高度）
% 定义背景图的百分比大小，允许设置一个值或两个值
cover 背景与会根据需要等比缩放，以实现覆盖容器背景区域（背景图像可能超出容器）
contain 将背景图等比缩放到与容器宽度或高度相等（背景图在容器内）
① 允许设定一个值或两个值
一个值
两个值
② 不能设置负值
③ cover与contain的异同
同
异
④ 当一个图片要在背景中完整呈现又被铺满时，设置宽高均为百分之百
网友评论