background 给元素添加背景属性, 是一个简写属性, 在一个声明中设置所有的背景属性。
简写
div {
background: skyblue url(bgimage.gif) no-repeat fixed top;
}
所有浏览器都支持 background 属性 且不可继承。
IE8 以及以下的浏览器不支持一个元素多设置个背景图像。
可以设置如下属性：
background-color //设置元素的背景色。
background-repeat //设置背景图像是否平铺
background-attachment //背景图像是否固定或者随着页面的其余部分滚动。
background-image //设置背景图像。
background-origin //设置背景图片的定位区域。
background-clip //设置背景的绘制区域。
background-position //设置背景图像的位置。
background-size //设置背景图片的尺寸。
background-color
元素的背景颜色取值和 color 类似
可以用以 # 开头的16进制颜色码 #FFB6C1 表示 也可用英文颜色单词关键字 red black 表示 还个用 CSS3中的新特性 rgba(255,255,0) 来表示 ;
如:
div {
background:#FFF;
}
background-image
要把图像放入背景，属性的默认值是 none，表示背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
如:
div {
background-image: url("图像的路径"); // ./ 为当前路径 ./../为上一层路径
}
background-position
背景图像的位置 有两个参数 第一个参数为横轴X ,第二个参数为 纵轴Y
提供以下3类取值:
- 关键字: top、bottom、left、right 和 center。
- 长度值: 100px, 5cm,1 rem,1pt 等。
- 使用百分数值 :50% ,20% 等。
关键字
通常成对出现 默认为 left top ;
如:
div
{
background-image:url("ssss");
background-repeat:no-repeat;
background-position:right bottom; //使图像放置在元素内边距区的右下角。 如果只写一个参数, 那么第二个参数默认为center。
}
长度值
元素内边距区左上角的偏移,偏移点是图像的左上角。
如:
div
{
background-image:url("ssss");
background-repeat:no-repeat;
background-position:right bottom; //图像的左上角将在元素内边距区左上角向右 100 像素、向下 100 像素的位置上。
}
百分数值
适当放置图像
如:
body
{
background-image:url(‘ssss‘);
background-repeat:no-repeat;
background-position:50% 50%; //使图像中心点和元素中心点对齐居中 如果只写一个参数,那么第二个参数默认 50%
}
background-repeat
在页面上对背景图像进行平铺
提供有以下4种值:
- repeat-x :图像只在水平方向上重复
- repeat-y :图像只在垂直方向上重复
- no-repeat: 不允许图像在任何方向上平铺
- 默认任何方向上平铺
如:
div
{
background-image: url("sss");
background-repeat: repeat-x; //图像只在水平方向平铺
}
background-attachment
只提供2种值:
属性的默认值是 scroll，在默认的情况下，背景会随文档滚动。
fixed 防止这种滚动,不会受到滚动的影响
如:
div
{
background-image:url("sss");
background-repeat:no-repeat;
background-attachment:fixed //固定图像
}
CSS3 背景新特性
background-size
设置背景图像的高度和宽度 第一个参数为 图像宽度,第二个为图像高度 可能会使图像拉伸变形。
提供以下四种取值:
- 长度值: px , pt 等
- 百分数值: 30% 30%
- cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域, 背景图像的某些部分也许无法显示在背景定位区域中 。
- contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 。
如:
div
{
background-image:url("sss");
background-repeat:no-repeat;
background-size:cover; //完全覆盖背景区域
}
background-origin
属性规定 background-position 属性相对于什么位置来定位。
如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。
提供的值有:
- padding-box :背景图像相对于内边距来定位。
-
border-box :背景图像相对于边框盒来定位。 -
content-box :背景图像相对于内容来定位。
如:
div
{
padding:20px;
border:20px dotted red;
background-image:url("sss");
background-origin:padding-box; //相对于内边距来定位
background-repeat:no-repeat;
}
background-clip
图像裁剪区域
提供的值和origin 属性类似 请参考 background-origin
