1.background-color:red ; //设置背景颜色为红色,rgb(0,0,0)和transparent 均为透明颜色
2.background-image(可缩bgi写用tab键)
语法:background-image:url('图片的路径');
注意点:背景图片不会将原有的盒子撑开;如果一张图片占不满一个盒子,默认是在水平和垂直方向平铺的
3.背景平铺属性
background-repeat(简写bgr)
属性值 | 效果 |
no-repeat | 不平铺 |
repeat-x | 沿着水平方向平铺(x轴) |
repeat-y | 沿着垂直方向平铺(y轴) |
4.背景位置
background-position(bgp)
语法格式:background-position:水平方向位置 垂直方向位置;
如果使用第二种方式,坐标轨迹规则:(盒子总大小是400*400px,则background-positon:200px 200px;则是y轴的一半和x轴的一半,即为右下角)
注意:两种方式可以混合使用,比如:background-position:center 200px;
总结:背景相关属性的连写的方式
属性名:background
书写顺序推荐:background:color image repeat position
注意点:连写和单写同时出现,单写一定要放在连写的下面,否则会覆盖属性;
扩展:img标签和背景图片的区别
注意:背景图片要想显示出来效果,要配合标签使用,并设定宽和高;而img标签是不需要的