background

2017-11-25

css中关于背景background的设置有以下几种,分别为background-color, background-image, background-repeat, background-position, background-size

##一、background-color
是对元素背景色的设置,其中颜色的设置可以为英语单词;十六进制法;rgb(0~255,0~255,0~255)rgba()就是三原色加上透明度,opacity就是透明度;还有种表示方法是hsl() ,对色调的设置。

##二、background-image
是对背景图片的设置,格式为background-image(url...)url 全称为统一资源定位符,里面写的是图片的地址,可以是线上地址或者是本地地址。

##三、background-repeat
是设置背景图片的平铺设置,有四个值,分别为repeat-x ,repeat-y ,no-repeat, inherit。第一个值为背景图片在x轴方向上平铺,在y轴上不平铺,背景图片的平铺默认样式为两个轴上都平铺。同理可得,repeat-y就是在y轴上进行平铺,在x轴上不平铺。no-repeat就是在两个轴上都不平铺。最后一个值inherit就是继承父级的background-repeat属性。

##四、background-position
有两个值,背景图片的定位设置。值的形式可以设置像素(支持正负数),可以设置方向和百分比(left=0%,center=50%,right=100%)。雪碧图(精灵图)也会用到这个属性。

##五、background-size
也有两个值,背景图片的尺寸设置。值的形式也是有设置像素值,百分比和cover全充满,contain充满至宽高有一方触碰到父级的边界。

##六、background简写
还有就是背景的这五个值可以简写,格式为background: background-color background-image background-repeat background-position /background-size,而且顺序可以打乱。另外背景图片还可以设置多个,中间用逗号隔开。