CSS背景

159 阅读1分钟

背景颜色

background-color: 颜色值

默认情况下背景颜色默认值是transparent(透明),也可以手动指定为transparent

背景图片

优点是非常便于控制位置

background-image: none | url(url)

背景平铺

background-repeat: repeat|non-repeat|repeat-x|repeat-y

背景图片会平铺
repeat:在横向和纵向上都平铺(默认的)
no-repeat:背景图像不平铺
repeat-x:背景图像在横向上平铺
repeat-y:背景图像在纵向上平铺

可以同时添加背景颜色和背景图片,背景图片压住背景颜色

背景图片位置

background-position

1、参数是方位名词
    指定的两个值都是方位名词,则两个值的前后顺序无关
    只指定一个方位名词,则另一个默认居中
    x轴:left\center\right
    y轴:top\center\bottom

2、参数是精确单位
    第一个是x坐标,第二个是y坐标
    
3、参数是混合单位
    方位名词+精确单位
    第一个是x坐标,第二个是y坐标
   

背景图像固定

background-attachnent: scroll | fixed

scroll 背景图像是随着对象内容滚动
fixed  背景图像固定

背景混合写法

当使用简写的时候,没有特定的书写顺序,一般约定的顺序为
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

背景颜色的半透明

background:rgba(0,0,0,0.3)

最后一个参数alpha透明度,取值范围在0~1之间
在实际开发中可以把0.3简写成.3
CSS3新增属性,只要IE9+版本的浏览器才支持