CSS背景

CSS背景

• 3D背景模型

3D背景模型

• 属性
• background-color
• background-image
• background- repeat
• background- position
• background-size
• background-attachment
• background-clip
• background-origin

1. background-color
   <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

2. background-image
   background-image: url()

3. background- repeat
   在什么方向上重复。

/* One-value syntax */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;//调整图像间空隙来占满空间而不被裁剪
background-repeat: round;//伸缩调整图像大小占满空间而不被裁剪，没有空隙！
background-repeat: no-repeat;
/* Two-value syntax: horizontal | vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;
background-repeat: inherit;

1. background- position
   背景图上定位初始位置（左上角）；
   一般和sprite图结合使用；

2. background-size
   背景缩放：指定大小宽高、cover ；拉伸刚好占满空间、contain；缩放保持宽高比。知道宽或高触及背景区边缘；

3. background-attachment
   背景是否跟随页面滚动

background-attachment:scroll;//默认不跟随页面滚动
background-attachment:fixed;//跟随页面滚动

1. background-clip
   背景出现的区域：

background-clip: border-box //背景至边框以内（包括边框）
background-clip: padding-box//背景内边距以内（包括内边距下）
background-clip: content-box//背景只有内容下有
background-clip: inherit

1. background-origin
   background-origin
   指定背景图片background-image属性的原点位置的背景相对区域.
   注意：当 background-attachment: fixed时，该属性将被忽略；

background-clip: border-box //背景图在边框以内（包括边框）
background-clip: padding-box//背景图在内边距以内（包括内边距下）
background-clip: content-box//背景图只有内容下有
background-clip: inherit