CSS背景
- 3D背景模型
3D背景模型
- 属性
background-colorbackground-imagebackground- repeatbackground- positionbackground-sizebackground-attachmentbackground-clipbackground-origin
background-color
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>background-image
background-image: url()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;
background- position
背景图上定位初始位置（左上角）；
一般和sprite图结合使用；background-size
背景缩放：指定大小宽高、cover ；拉伸刚好占满空间、contain；缩放保持宽高比。知道宽或高触及背景区边缘；background-attachment
背景是否跟随页面滚动
background-attachment:scroll;//默认不跟随页面滚动
background-attachment:fixed;//跟随页面滚动
-
background-clip
背景出现的区域：
background-clip: border-box //背景至边框以内（包括边框）
background-clip: padding-box//背景内边距以内（包括内边距下）
background-clip: content-box//背景只有内容下有
background-clip: inherit
-
background-origin
background-origin
指定背景图片background-image属性的原点位置的背景相对区域.
注意：当background-attachment: fixed时，该属性将被忽略；
background-clip: border-box //背景图在边框以内（包括边框）
background-clip: padding-box//背景图在内边距以内（包括内边距下）
background-clip: content-box//背景图只有内容下有
background-clip: inherit
