Day 09 CSS <背景属性>

CSS背景属性 可以给页面元素添加背景样式
背景属性可设置背景颜色、背景图片、背景平舖、背景图片位置、图像固定等等

1.背景颜色
background-color属性可定义元素的背景颜色

background-color:颜色值;

background-color:red;

默认为透明值: transparent

2.背景图片

background-image属性可定义元素的背景图片

於logo或一些装饰性的小图片或是超大的背景图片是常见的使用情况
优点是较於便於控制位置

background-image : none|url(url)
默认值为none(没有图片)

3.背景平舖
background-repeat属性定义背景图片的平铺

background-repeat:repeat|no-repeat|repear-x|repeat-y

repeat (背景图像片在纵向和横向上的平铺 (默认))
no-repeat(背景图片不平铺)
repeat-x (背景图片在x轴(横向)平舖
repeat-y (背景图片在y轴(纵向)平舖
round (使用缩放或变形的方式，让背景图片在不裁切的情况下填满背景。)

4.背景图片位置
利用background-position:x y进行调整背景图片位置
参数代表的意思是X座标或Y座标 可以使用方位名词或是精确单位

backgorund-position:x y;

length 百分数组成的长度值
position top|center|bottom|left|right|  (方位名词)

备注 :

• 参数是方位名词时

• 如果指定的两个值都是方位名词，则两个值前後顺序无关

• 比如left top和top left效果是一致

• 只指定了一个方位 另外一个值省略，则第二个值默认居中对齐

• 参数是精确单位时

• 若是精确座标 前一定为X座标 後一定为Y座标

• 若只指定一个数值 该数值一定为X 另一个为居中

• 参数是混和单位时

• 使用方位名词时看则精确单位 ex: 20px center

• 第一个值为X座标 第二个值为Y座标

5.背景图像固定
background-attachment 属性设置背景图像是否固定或随着页面的其余部分滚动
且後期可以制作视差滚动的效果

background-attachment: scroll | fixed

scroll = 背景图像随对象内容进行滚动
fixed = 背景图像固定

6.背景复合写法
以上背景属性皆可简写在一个属性background中去进行设定背景元素
普遍使用的约定顺序为:

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

background:red url(image.jpg) repeat-y fixed top;

7.背景色半透明做法
CSS3为我们提供了背景颜色半透明的效果

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

• 最後一个参数是alphe透明度 取值在0-1之间
• 习惯把0.3的0省略掉
• 注意: 背景半透明是指盒子背景半透明 内容不影响

背景属性 codepen:
可自己copy code 带入图片尝试