CSS背景

css背景

1. 背景颜色

   • banckground-clor属性定义元素的背景颜色

   • background-color：颜色值；
     

   • 一般情况下元素的背景颜色默认值是transparent（透明的）

2. 背景图片

   • background-image属性描述了元素的背景图像。实际开发常见于LOGO或者一些装饰性的小图片或者超大的背景图片，优点是非常便于控制位置

   • background-image：none|url（url）
     

     参数值	作用
     none	无背景图片
     url	使用绝对 或者相对地址指定图片

3. 背景平铺

   • 使用background-repeat属性设置

   • background-repeat：repeat|no-repeat|repeat-x|repeat-y；
     

     参数值	作用
     repeat	平铺
     no-repeat	不平铺
     repeat-x	沿着x轴平铺
     repeat-y	沿着y轴平铺

4. 背景图片位置

   • background-position属性可以改变图片在背景中的位置

   • background-position：x y；
     

     参数值	说明
     length	百分数|由浮点数字和单位标识符组成的长度
     position	top|center|bottom|left|center|right 方位名词

   • 参数是方位名词

     • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和top left效果一致

   • 参数是精确单位

     • 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个肯定是Y坐标

   • 混合单位

     • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是Y坐标

5. 背景图像固定（北京附着）

   • background-altachment属性设置背景图像是否固定或者随着页面的其余部分滚动

   • background-altachment：scroll|fixed
     

     参数	作用
     scroll	背景图像随着对象内容滚动
     fixed	背景图像固定

6. 背景属性的复合写法

   • background：背景颜色 背景图片位置 背景平铺 背景图片位置
     

7. 背景色半透明

   • background：rgba（0，0，0，0.3）
     

   • 最后一个alpha透明度，取值范围在0~1之间

属性	作用	值
background-color	背景颜色	预定义的颜色值、十六进制、RGB代码
background-image	背景图片	url（图片路径）
background-repeat	是否平铺	repeat、no-repeat、repeat-x、repeat-y
background-position	背景位置
background-altachment	背景附着	scroll（背景滚动）、fixed（背景固定）
背景简写	书写更简单	背景颜色 背景图片位置 背景平铺 背景图片位置
背景半透明	背景颜色半透明	background：rgba（0，0，0，.3 ）