HTML5+Css3（背景属性background）

css背景属性 background

1. background-color背景颜色

• 背景颜色可以用“十六进制”、“rgb()”、“rgba()”或“英文单词”表示

2. background-image:url(路径);背景图片

• 也可以写成 background:url();

3. background-repeat背景重复

• 属性值：

    - repeat:x,y平铺（默认）
    - repeat- x：水平方向平铺
    - repeat-y：垂直方向平铺
    - no-repeat：不平铺，(照片不重复)

4. backgroun-position 背景图片位置

• 属性值：backgroun-position：向右移动 向下移动 ;
• 向右移动：可以写向左移动（left），向右移动（right），居中（center）；也可以是像素（具体值），要是是负值表示向左移动
• 向下移动：可以向上移动（top），向下移动（bottom），居中（center）,也可以是具体值，或者用像素表示，要是负值就是向上移动
• 他们的组合有：

  
   backgroun-position: center center ;
   backgroun-position: center top ;
   backgroun-position: center bottom ;
   
   backgroun-position: left top ;
   backgroun-position: left center ;
   backgroun-position: left bottom ;
   
   backgroun-position: right top ;
   backgroun-position: right center ;
   backgroun-position: right bottom ;
  

5. backgroun复合属性

• backgroun:url() 平铺 照片位置 照片大小 颜色 ; (位置不固定)

6. background-attachment 背景固定，页面滚动

• 决定背景图像的位置是在“视口”内固定，或者随着它的区块滚动
• scroll： 默认值。背景图片随着页面的滚动而滚动，相对于元素本身固定，而不是随着它的内容滚动
• fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景不会随着元素的内容滚动
• local： 背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，同时背景图图片随着页面的滚动而滚动

7. background-size 背景尺寸

• 背景图片的宽高大小

x  y	：	background-size: 100px 200px; （x y 数值，分别表示背景图片宽高大小）
x% y%	：background-size: 50% 20%; （百分比是相对于盒子的宽高而言，）
x auto	：background-size: 100px auto; （是相对于第一个值宽来自动缩放）
contain ：background-size: contain; （背景图片智能改变尺寸以容纳到盒子里）
cover   ：background-size: cover; （背景图片智能改变尺寸以撑满盒子）

8. background-clip 设置元素的背景，裁剪

• background-clip设置元素的背景(背景图片或颜色)是否延伸到“边框”、“内边距盒子”、“内容盒子”下面

值	说明
border-box	默认值。背景绘制在边框方框内。 延伸至边框边缘
padding-box	背景绘制在内边距方框内。 延伸至内边距边缘
content-box	背景绘制在内容方框内。 仅限于内容区域
text	背景被裁剪成文字的前景色。

9. background-origin 背景图片的定位区域

值	描述
padding-box	背景图片的摆放以 padding 区域为参考 默认值 从边框开始绘制
border-box	背景图片的摆放以 border 区域为参考 从内边距开始绘制
content-box	背景图片的摆放以 content 区域为参考 从内容区域开始绘制

10. background-blend-mode

• 设置背景层之间的混合模式。适用于有多重背景图像或背景颜色与背景图像混合的情况。可选值众多，如normal、multiply、screen、overlay等。