在开发中背景属性 background
还是很常用的, background
有很多属性,如:
background-color
背景颜色
background-image
背景图像
background-position
背景图像的位置
background-size
背景图片的尺寸
background-repeat
重复背景图像
background-origin
定位区域
background-clip
绘制区域
background-attachment
是否固定或者跟随页面滚动。( scroll :默认值,随页面滚动;fixed 固定,不滚动;inherit继承。)
当然这些属性可以分开写,也可以连写(简写),规则(顺序)如下:
background:color img_url repeat attachment position / size
颜色 图片地址 重复 是否固定 位置 / 尺寸
示例:
background:#F00 url('img/images.png') no-repeat fixed center / cover
红色背景,不重复,固定背景,居中,短边填充。
图像位置和尺寸用 / 隔开,前面是 background-position
,后面是 background-size
。
其中 background-position
的写法注意:语义描述时是 top left
,数值描述时是 x-pos y-pos
,两种顺序相反。 background-size
的写法是:width height
。
这样分开写会更好理解一些:
background:#F00 url('img/images.png') no-repeat fixed top left / 100% auto
靠左上,宽度 100%
,高度自适应。