background-imgage背景图片
background-imgage: url(地址)
background-repeat背景平铺效果
background-repeat: repeat-x | repeat-y | repeat | no-repeat
background-position背景位置
background-position:百分数 | 由浮点数字和单位标识符组成的长度值
1、background-position:top | center | bottom | left | right
不写background-position则默认为left top;写一个值,另一个值默认为center;
2、background-position:20px 50px;
使用精确值定位,上面表示x轴20,y轴50px;负值表示x或y轴的反方向;
第一个值一定是x轴,第二个是y轴;
3、background-position:20px center;
使用混搭。第一个值仍然是x轴,第二个值是y轴。
background-attachment背景附着
background-attachment:scroll | fixed
scroll:背景图像时随内容滚动
fixed:背景图像固定
background背景简写
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景透明
background:rgba(0,0,0,0.6);
最后一个参数alpha透明度 取值范围0~1之间;
注意:背景半透明时指盒子背景半透明,盒子里面的内容不受影响。同样,可以给文字和边框透明,都是rgba的格式来写。
背景缩放(CSS3)
background-size: 100px; /*可以更改两个值,但是尽量修改一个*/
background-size: 50%; /*百分比*/
background-size:cover; /*会自动调整缩放比例,保证图片始终填充满背景区域,如果溢出部分则会被隐藏*/
background-size:contain; /*会自动缩放比例,保证图片始终完整显示在背景区域*/
多背景图片
background: 背景图片地址 背景平铺 背景位置 ,
背景图片地址 背景平铺 背景位置 ,...,
背景颜色 背景图片地址 背景平铺 背景位置;
以逗号分隔可以设置多背景,可用于自适应布局。
多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上,为了避免背景色将图像盖住,背景色通常定义在最后一组上。