点击刷新
主要涉及：颜色、图片、平铺、位置、固定，这五个方面的设置。
背景颜色
background-color: transparent /* 默认：透明的 */ background-color: #ffffff /* 十六进制颜色 */
背景图片
background-image: none; /* 默认：无图 */ background-image: url(); /* 图片链接 */
开发中常用于logo、装饰性小图片、超大图片、精灵图。
可以同时设置背景颜色和背景图片，背景图片会位于背景颜色之上。
相较于直接使用<img>标签，更容易控制图片位置。
背景平铺
background-repeat: repeat; /* 默认：重复 */ background-repeat: no-repeat; /* 不重复，即只显示一个 */ background-repeat: repeat-x; /* 沿x轴方向重复 */ background-repeat: repeat-y; /* 沿y轴方向重复 */
背景位置
/* 使用方位名词 */ background-position: center center /* 默认 */ background-position: top left background-position: bottom right /* 使用精确单位 */ background-position: 20px 50px /* 混合写法 */ background-position: center 60px background-position: 80px top
background-position可跟两个参数。
1. 使用方位名词时，无顺序要求。可以填的参数有：center(x和y方向均可)、left(x方向)、right(x方向)、top(y方向)、bottom(y方向)。
如果只写了一个方位名词，则另一个方向为center。
2. 使用精确单位时，第一个参数表示x方向，第二个参数表示y方向。
如果只写了一个精确单位，则表示的是x方向，y方向默认为center。
3. 使用混合写法时，第一个参数表示x方向，第二个参数表示y方向。
背景固定（附着）
background-attachment: scroll; /* 默认：滚动 */ background-attachment: fixed; /* 固定 */
背景复合写法
/* background: 颜色 图片 平铺 滚动 位置; */ background: pink url(img/female.png) repeat-y scroll right top;
无严格的顺序要求，以上顺序为开发中约定的写法。
颜色 图片 平铺 滚动 位置
背景颜色半透明
background: rgba(红 绿 蓝 透明); /* 红绿蓝可填0-255 */
/* 透明可填0-1 */
*CSS3新增特性，IE9以上支持。
以下表格摘自黑马程序员网课教程：
© 著作权归作者所有
举报
发表评论
0/200
