html-css背景属性

background 的常见背景属性

• background-color:#ff99ff; 设置元素的背景颜色
• background-image:url(图片地址); 将图像设置为背景。
• background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。
  - no-repeat不要平铺；
  - repeat-x横向平铺；
  - repeat-y纵向平铺。

background-position 属性 设置背景图片在当前容器中的位置。

• 用单词描述属性值：

    `background-position:center top;` 

- 描述左右的词：left、center、right
- 描述上下的词：top 、center、bottom

• 用像素值描述属性值：

	background-position:向右偏移量 向下偏移量;

- 属性值可以是正数，也可以是负数。比如：`100px 200px`、`-50px -120px`。

RGB 表示法

• RGB 表示三原色“红”red、“绿”green、“蓝”blue。每个值的取值范围0~255，一共256个值。

RGBA 表示法

          /* 背景颜色透明度 */
    background-color: rgba(0, 0, 255, 0.3);
          /* 线条颜色透明度 */
    border: 30px solid rgba(0, 255, 0, 0.3);

• R、G、B 的取值范围是：0~255；透明度的取值范围是 0~1。

background-attachment 属性

• background-attachment:scroll; 设置背景图片是否固定。属性值可以是：
  • fixed（背景就会被固定住，不会被滚动条滚走）。
  • scroll（与fixed属性相反，默认属性）

background-size属性：背景尺寸

• background-size属性：设置背景图片的尺寸。
  • 例：

    	/* 宽、高的具体数值 */
    	background-size: 500px 500px;
    
    	/* 宽高的百分比（相对于容器的大小） */
    	background-size: 50% 50%;   // 如果两个属性值相同，可以简写成：background-size: 50%;
    
    	background-size: 100% auto;  //宽铺满容器，高自适应，图片不会变形。
    
    	/* cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。 */
    	background-size: cover;
    
    	/* contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白。  */
    	background-size: contain;