在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
,而且顺序可以打乱。另外背景图片还可以设置多个,中间用逗号隔开。