一.背景颜色
指定元素背景颜色.
属性:background-color.
取值:
- 颜色取值:
-
颜色单词:red,yellow,green,… -
rgb(r,g,b):红绿蓝三个通道,每个通道取值为0–255. -
rgb(r,g,b,a):红绿蓝三个通道,每个通道取值为0–255;外加一个透明度,取值为0–1,0为完全透明,1为不透明. -
#FFFFFF:十六进制. -
#FFF:十六进制缩写. -
transparent:透明色.
-
注意:-.
二.背景图像
设置背景图像.
属性:background-image.
取值:
-
url("URL地址");.- URL地址可以是本地文件或者远程地址.
注意:
- 如果图片大小不够标签尺寸,默认会自动复制该图片并填充.
- 如果同时设置背景颜色和背景图像,背景图片会覆盖掉背景颜色.
- 如果没有指定标签的宽度和高度,背景图片不会显示.
- 浏览器对于网页资源和图片资源,是分两次发送请求.
三.背景图像尺寸
设置背景图像尺寸.
属性:background-size.
取值:
-
width height.- 这两个值可以是具体的像素(必须加单位
px),也可以是百分比值.当只设置一个值时,设置的是宽度,整个图片会等比缩放,设置两个值时,前面的值是宽度,后面的值是高度,用空格分隔即可.
- 这两个值可以是具体的像素(必须加单位
-
cover.- 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域.背景图像的某些部分也许无法显示在背景定位区域中.
-
contain.- 把图像扩展至最大尺寸,以使背景图像的宽度和高度完全适应内容区域.
四.背景图像平铺模式
背景图像按照怎样的方式在元素内平铺.
属性:background-repeat.
取值:
-
repeat:平铺(默认值).应用场景:从服务器下载小图片在标签内平铺成大图片,可以提升速度. -
no-repeat:不平铺. -
repeat-x:横向平铺. -
repeat-y:纵向平铺.
五.背景图像位置
定位背景图像在元素中的位置.
属性:background-position.
取值:
-
x y.- 具体的方位词
- 水平:
left,center,right. - 垂直:
top,center,bottom.
- 水平:
- 具体的像素值
- 必须写单位
px. - 正数往右移动,负数往左移动.
- 必须写单位
- 具体的方位词
六.背景附件
关联方式,背景图像是否跟着内容滚动而滚动.
属性:background-attachment.
取值:
-
scroll:背景图像跟着内容滚动. -
fixed:背景图像固定不动.
七.背景起始位置
背景图像从左上角的开始位置.
属性:background-origin.
取值:
-
border-box:背景图像相对于边框来定位. -
padding-box:背景图像相对于内边距框来定位. -
content-box:背景图像相对于内容框来定位.
注意:
八.背景裁剪方式
指定背景绘制区域(背景颜色和背景图像皆适用).
属性:background-clip.
取值:
-
border-box:背景颜色默认值.背景被裁剪到边框盒. -
padding-box:背景被裁剪到内边距框. -
content-box:背景被裁剪到内容框.
九.背景属性的简写
属性:background.
取值:
-
背景颜色. -
背景图片. -
平铺方式. -
关联方式. -
背景位置.
格式:background: 背景颜色 背景图片 平铺方式 关联方式 背景位置;.
注意:
- 这几个属性值任何一个都可以省略.
- 可以同时设置多个背景图像,使用
,分隔即可.为了避免背景颜色被盖住,通常背景颜色会放置在最后一组.
十.背景图像和前景图像
- 背景图像不会占用位置,一个元素内图像和文字可以重叠出现.
- 插入图片语义较强,会被SEO收录.