本文目录
css中background-size属性使用介绍
background-size的值类型：1个或2个值，这些值既可以是像素px，也可以是百分比%或auto，还可以是特定值cover,contain。background-size可以设置2个值，1个为必填，1个为可选。其中第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只给background-size设置1个值，则第2个值默认为auto高度自动(通常默认高度是auto自动,自适用内容而增高,通常如果想高度自适应不用设置)（cover和contain特定值除外）。复制代码代码如下:div{background-image:url(test.png);background-repeat:no-repeat;background-size:100px;}等价于：复制代码代码如下:div{background-image:url(test.png);background-repeat:no-repeat;background-size:100pxauto;}查看具体DEMO:background-size的值定义。当你使用firebug抓取到那个实例节点时，你会发现第二个值被自动加上了并且值为auto。当然，你也可以手动将第2个值设置为auto，然后与该DEMO的实例对比，它们的效果将是相同的。background-size的特定值：cover:保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域；contain:保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域；cover值： 代码如下:div{background-image:url(test.png);background-repeat:no-repeat;background-size:cover;}上例，背景图片将覆盖整个div区域。查看具体DEMO:background-size:cover。contain值： 代码如下:div{background-image:url(test.png);background-repeat:no-repeat;background-size:contain;}上例，背景图将缩放到宽度或高度的任意一边与div区域适应。查看具体DEMO:background-size:contain。
background属性
background一共有8个属性，css2.1中5个，css3中加了3个。 background的可以简写为 : 背景颜色 支持多种类型 背景图片 尽量用引号包起来 重复图片 滚动或者固定背景 图片位置 支持3中类型: 百分比，单位，英文关键字。三种类型能混合着写 默认值为 0% 0%; 第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果仅定义一个值，另外一个为50%。 可以是px或其他单位。 第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。 如果仅定义一个值，另外一个为50%。 如果仅定义了一个关键字，另外一个为center 值: center top bottom left right 背景大小 有四种类型 设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 背景的相对定位 背景图像的 background-attachment 属性为 fixed ，则该属性没有效果。 规定背景的绘制区域
css中background-image属性的作用是什么
设置背景图像的，可以把网页或部分网页（如div，如table）的背景设置成某个图片。background-image: url(图片名);这里的图片名包含路径，如果不正常显示，请查看路径是否有误。这个属性一般配合background-repeat使用。background-repeat:repeat-x; 背景图片在横向重复background-repeat:repeat-y; 背景图片在纵向重复background-repeat:no; 背景图片不重复
