背景样式: 是W3C规定一个浏览器如何渲染一个元素的背景层, 在背景层上,我们可以增加颜色,图片等效果;
为方便理解下面的内容,我们先来了解下,背景层级关系
--> 背景颜色层: 用于统一设置背景的颜色 : background-color: 颜色值
颜色值,可以用不同的方式进行表示
a. rgb方式: 提供红,绿,蓝三色参数, 每个参数的的取值范围为0-255,
b. rgba方式, 提供红,绿,蓝三色参数外,同时提供0~1之间值的四号参数, 透明度;
c. 十六进制: #000000到#ffffff 范围内的值; (#aabbcc可简写为#abc)
** 背景颜色会延伸到border下方 (文本内容是从内容区左上角开始填充)
--> 背景图片： background-image:url(路径)
a. 支持的图片样式 (jpg, png, gif, webp)
b. 默认展示方式: 重复平铺,且延伸到border区域 ;
对背景图片是否平铺展示控制: background-repeat:
** 不平铺: background-repeat:no-repeat; (图片从padding区开始填充,与文字不一样,)
** X方向平铺: background-repeat: repeat-x;
** Y方向平铺: background-repeat: repeat-y;
--> 背景显示基点: background-origin:
规定了图片在不平铺的情况下,背景图片左上角的初始位置;共有三种类型
content-box: 背景图片从content 区域左上角开始填充图片;
padding-box: 背景图片从padding区左上角开始填充图片;
border-box: 背景图片从border区左上角开始填充图片;
--> 背景尺寸: 用于设置北景图片的缩放尺寸规则; (background-size:50px 50px;)
** 背景尺寸大小的设置,有四种种方式
a. 直接指定宽度尺寸(上图为指定宽高为50px后不平铺和平铺的二种效果);
b. 百分比方式: 百分比的基数受基点模式的影响(若只输入一个百分比,另外一个百分比为auto, 代表等比例缩放)
基点: content-box: 宽的百分比基数=width, 高的百分比基数=height;
基点: padding-box: 宽的百分比基数= LeftPadding+Width+RightPadding, 高的百分比基数= TopPadding+Height+BottomPadding;
基点: border-box: 宽的百分比基数= LeftBorder+LeftPadding+Width+RightPadding+RightBorder;
高的百分比基数= TopBorder+TopPadding+Height+BottomPadding+BottomBorder;
(上述各种情况,将不再截图说明,请自行验证)
(特殊情况的效果也请自行验证: 如:基点为border-box; 但border未设置或只设置了右边或下边border的展示情况)
(若只输入一个百分比,另外一个百分比为auto, 代表等比例缩放)
c. 包含方式: background-size:contain; 图片以基点模式对应宽,高中的较小者,进行等比例缩放填充(宽或高无法填充满);
d. 覆盖方式: background-size:cover; 图牌以基点模式对应宽,高中的较然而者,进行等比例缩放填充(宽或高会超出)
--> 背景剪截区: background-clip
主要用于:当背景图片尺寸大于元素尺寸时,对背景图片可视区域的定义; 设置值与基点类型一样;
background-clip:border-box; 背景色延升到边框下; border范围内均可见,不受影响
background-clip:padding-box; 边框区域下的背景内容,已经被清理掉,
background-clip:content-box; 只有内容区的背景信息可见,其它位置背景已清理;
--> 背景图处位置 background-position;
所谓的图片位置,是指背景图片基于基点在水平和垂直方向上的偏移量;
a. 可直接指定X,Y方向上的偏移量: background-position: 50px 50px;
b. 指定在X,Y方向上的偏移百分比 (偏移百分比的基数是: 对应展示区的宽度-图片宽度; 对应展示区高度- 图片高度)
c. 直接指定位置: left, top , right, bottom,center;
--> 背景图片的依附模式 background-attachment
background-attachment:fixed; 背景图片以浏览器窗口为标准进行填充; 即便对应元素有滚动条,背景也不会滚动;
background-attachment:local; 背景相对于元素的内容是固定的(跟着内容跑),
background-attachment:scroll;背景图片相对于元素来说固定,与内容无关
----------------------------------------------------------------------------------------------------------------
背景的综合应用 (一次性将背景样式设置好 <注意图层的展示先后顺序>)
