CSS核心属性–背景属性
1.背景颜色
属性:background-color
取值:
- 颜色单词 。
- 六位十六进制的颜色值 。
- rgba(red,green,blue,alpha)。
red–红色
green–绿色
blue–蓝色
alpha–透明度取值范围:0-1
注意:取值是小数,一般保留一位小数即可,如0.1,0.2(前面的0可以省略)。
0–透明
1–不透明
2.背景图片
属性:background-image:url(图片的路径)
注意:主要你插入背景图片,默认会产生平铺的效果–产生平铺之后,背景颜色是看不到了不是代码被覆盖。
3.背景平铺属性-背景重复
属性:background-repeat
取值:
repeat–默认值重复平铺的
no-repeat–取消平铺,不重复(应用最多的情况)
repeat-x --水平平铺
repeat-y --垂直平铺
4.背景图片的位置
只要插入背景图片之后,默认会产生平铺效果,取消平铺之后图片是不会在左上角显示的,有必要的话需要调整位置。
属性:background-position
取值:x y
- x–水平方向位置
+向右
-向左
关键词:left/right/center
- y–垂直方向位置
+向下
-向上
关键字:top/bottom/center
注意:取值可以是数值单位,可以是方位词。
5.调整背景图片尺寸大小
属性:background-size
取值:x y
水平方向的大小。
垂直方向的大小。
注意:取值里面的关键词(一个关键词替换x,一个替换y)。
- cover–覆盖(应用高)
等比例放大图片,直到图片撑满整个盒子为止(会出现被裁减的情况)。
- contain–包含
等比例放大图片,只要有一个边缘撑满了,就结束了(容易出现留白的情况)。
6.背景图片的滚动和固定
当你页面有滚动条的时候,滚动滚动条背景图片会被带动一起上去的效果叫做滚动,相反,如果不出现滚动的情况的话,这种情况就叫做固定。
属性:background-attachment
取值:
scroll–滚动
fixed–固定
注意:只要你添加看背景的固定,背景图的参照物位置都是浏览器窗口的左上角,大小调整也是参照浏览器窗口。
7.背景的复合属性
即一个属性可以实现多种样式。
属性:background:color image repeat position/size attachment
注意:
- 后面可以跟一个值也可以跟多个值
- 多个值部分先后顺序
- 尺寸大小和位置一起使用的时候,必须使用/链接且必须给值,如果是不需要调整位置的情况下,也要给值0px 0px。
如:20px 20px/200px 200px
0px 0px/200px 200px
/前面代表是位置。
/后面代表是大小。