背景背景
背景共分为以下8个属性
background:背景颜色
背景图片:背景图片
平铺方式:背景图片重复
背景位置:背景图片位置
background-size:背景图片尺寸
background-attachment:背景图片是否固定不动
background-clip:背景覆盖区
background-origin:背景图片覆盖区
其中常用的是
背景颜色,背景图片,背景平铺方式,背景位置background - color
:
颜色名称,如:背景颜色:红色(背景颜色是红色)
-
<李>
十六进制背景色,如:background - color: # ff0000;/background - color: # f00;(#后面有三个字符说明每两个是相同的,也就是# f00相当于# ff0000)
李 <李>rgb颜色,这里如果是rgba,一个表示透明程度,0表示全透明,1表示完全不透明,如:background: rgba (255, 0, 0, 0.5);
李 <李>透明,透明,如:背景颜色:透明的;
李背景图片:
-
<李>
url图片地址,可以多个图片,如:背景图像:url (img/a.jpg), url (img/b.jpg)
李 <李>没有,不显示背景图像
李背景图像与背景颜色联合使用,保证在出现以下几种情况下,有背景色可以填充
(1)图片出不来(可能路径错,图片不存在)
(2)图片被误删除
(3)图片在不平铺的情况下覆盖不了整个盒子
平铺方式:
-
<李>
重复:水平和垂直方向都重复图像,如:平铺方式:重复;
李 <李>repeat-x:水平方向重复图像
李 <李>repeat-y:垂直方向重复图像
李 <李>没有重演:图像不重复
李背景位置:
-
<李>
位置名字组合定位,只写一个默认另一个为居中,如:背景位置:右底部;/背景位置:中心;
李 <李>百分比位置,如:背景位置:20% - 20%;
李 <李>具体像素位置,如:背景位置:20 px 20 px;
李background-attachment:
-
<李>
滚动:背景图像相对于页面不动,会随着网页的滚动而移动,默认
李 <李>固定:背景图像相对于浏览器窗口不动,内容滚动的时候背景图像不动,如:background-attachment:固定;
李background-size:
-
<李>
像素大小,只写一个默认另一个为汽车,如:background-size: 200 px 100 px;
李 <李>百分比大小,如:background-size: 60% - 60%;
李 <李>的封面:背景图像覆盖当前元素的所有背景区域,如:background-size:封面;
李 <李>包含:图像显示最大且刚好完全显示,一般不能覆盖全部背景区
李background-clip:
-
<李>
border-box:背景覆盖到边框区域,如:background-clip: border-box;
李 <李>padding-box:背景覆盖到填充区域
李 <李>contect-box:背景只覆盖到内容区域
李background-origin:
-
<李>
border-box:背景图像的起始位置在边框处,如:background-origin: border-box;
李 <李>padding-box:背景图像的起始位置从填充处开始
李 <李>内容框:背景图像的起始位置从内容处开始
李该属性从ie9开始支持
背景简写:(中间用空格隔开)
背景:(background)(背景图片)(平铺方式)(背景位置)(background-size)
例:
。盒子{
身高:400 px;
background - color: # e8e8e8;
背景图片:url ('www.baidu.com/XXXX.jpg');可以加单引号也可以不加
平铺方式:不再重演;
背景位置:中心中心;
background-size: 100 px 100 px;
}
可以简写为:
。盒子{
身高:400 px;
背景:# e8e8e8 url ('www.baidu.com/XXXX.jpg')没有重演中心中心/100 px 100 px;
}
