背景(background)
内容可以把容器的宽高撑起来,背景不会占用容器的宽高
-
background-color 背景色
red: 颜色的英文表示 #f00: 颜色的十六进制表示 rgb(255,0,0): 颜色的RGB表示方法 在CSS3中rgba(255,0,0,0.5) 第四个参数表示透明度 transparent 背景透明(默认值为透明)例:background-color: green;
-
background-image 背景图片
url(图片地址) none 默认值
例:background:url(点点.jpg);
ps:路径:
绝对路径 从磁盘出发的路径
相对路径 相对于网页文件的路径
域名路径 使用网络域名的路径
-
background-repeat 背景图片是否重复平铺
background-repeat: no-repeat; //背景图片不进行平铺 background-repeat: repeat-x; //背景图沿着x轴平铺 background-repeat: repeat-y; //背景图沿着Y轴平铺 background-repeat: repeat; //全部平铺(默认值) -
background-position 背景图片的位置
两种形式的值 传参数：背景图离左上角的距离 x：正 向容器右边走的距离 负 向容器左边走的距离 y：正 向容器下边走的距离 负 向容器的上边的距离 传关键字 x:left 图片在容器的左边 center 图片在容器的中间 right 图片在容器的右边 y:top 图片在容器的上边 center 图片在容器的中间 bottom 图片在容器的下边 如果只传一个值的话，另外一个默认是center 如果两个值都不写的话，则默认为(0,0)点 ,即左上角
例:background-position:20px 30px;//图片向右移动20像素，向下移动30px
-
background-attachment 背景图片是否滚动
scroll 背景图随滚动条滚动(默认) fixed 背景图不会随着滚动条滚动 -
背景的复合式写法：
background: green url(点点.jpg) no-repeat center top;//背景为绿色，加入图片，图片不重复平铺，图片的x方向上居中，图片的y方向上居上。
