CSS 背景 background

CSS - 背景颜色

body{ background-color: #5F9EA0; }

background-color 的值有 :

  • 颜色名称(如 red)
  • HEX也就是 十六进制(如 #3F3F3F)
  • rgb()/rgba() (如 rgb(255,0,0) )
  • transparent 设置背景色为透明

CSS - 背景图片

background-image 设置背景图片,默认背景图像水平和垂直方向平铺重复显示,以覆盖整个元素。

div{ background-image: url(bgpic.png); }

CSS - 背景图片平铺方式

background-repeat 设置图片平铺方式

body{
	background-image: url(bgpic.png);
	background-repeat:repeat-x;
}

repeat-x 表示水平方向重复。background-repeat 的值有:

  • repeat - 默认值,表示水平和垂直方向平铺重复显示
  • repeat-x - 水平方向重复
  • repeat-y - 垂直方向重复
  • no-repeat - 仅显示一次

CSS - 背景滚动方式

background-attachment 设置背景滚动方式,设置背景图像是否固定或者随着页面的其余部分滚动。

body{
	background-image: url(bgpic.png);
	background-repeat:no-repeat;
	background-attachment:fixed;
}
  • scroll - 默认,背景图片随着页面的滚动而滚动
  • fixed - 背景图片不会随着页面的滚动而滚动
  • local - 背景图片会随着元素内容的滚动而滚动

CSS - 背景图像的位置

background-position 设置背景图像的位置。background-position :center center;设置背景图水平方向为靠左,垂直方向为居中。

body{
	background-image: url(bgpic.png);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:left center;
}

CSS - background 简写

body { 
	background:#f2f2f2 url('bgpic.png') no-repeat; 
	background-size: 100%;
}

以上实例,当图片显示失败的时候,显示背景颜色。background-size 是 css3,设置背景图片尺寸,能更好的展示页面。

属性无需全部使用,没使用的属性按照默认值起作用。使用简写属性时,属性值的顺序为:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS - 背景 background

属性 描述
background-color 背景颜色
background-image 背景图像
background-repeat 图片平铺方式
background-attachment 背景滚动方式
background-position 背景图像的位置