背景
1 分为背景色和背景图 ,背景色可以设置单一颜色为背景,背景图片是以图片为背景,可以设置位置尺寸,平铺等
背景色:background-color:默认白色,可以设置人和合法颜色,也可设置为透明(transparent);为元素框设置背景色,会填充元素的内容,内边距
背景图片
设置背景图片:background-imge,默认是none,语法为background-imge:url(路径);
背景重复:默认背景图会在水平和垂直方向上平铺,出现类似墙纸的效果,通过background-repeat来设置平铺效果;语法为:background-repeat:value;(取值为repeat(平铺 默认) repeat-x(水平方向平铺) repeat-y(垂直) no-repeat(不平铺,图像只显一次))
背景尺寸:规定图片的尺寸,其语法为:background-size:value1 宽度value2高度 ,可以取值百分比 像素 cover(让背景图等比拉伸,以充满整个元素,可能导致某些无法显示)/contain(保持图像的宽高比不变将图片压缩或拉伸到宽度或高度正好适应元素的区域,此时不一定充满整个元素)
背景图片的固定:默认情况下,背景图会随着页面的滚动而滚动,有时我们需要背景图固定不动,这时就要用到background-attachment,语法为:background-attachment:value; value可取值scoll(不固定)fixed(固定)
背景定位:修改背景图在背景中的位置,语法为:background-position:value;value可以为 x y(表示背景图沿着x轴y轴的长度,)/x% y%(),还可以为left/right/top/bottom/center
背景绘制区域:background-clip,可取值为:border-box(背景被裁剪到边框)padding-box(背景被裁剪到内边内容区域
content-box(背景被裁剪到内容区域)
背景定位区域:background-origin,可取值为:border-box () padding-box() content-box()
简写方式:baground属性,在一个声明中设置所有的背景属性,语法结构为:background:color url() repeat attachment
1 分为背景色和背景图 ,背景色可以设置单一颜色为背景,背景图片是以图片为背景,可以设置位置尺寸,平铺等
背景色:background-color:默认白色,可以设置人和合法颜色,也可设置为透明(transparent);为元素框设置背景色,会填充元素的内容,内边距
背景图片
设置背景图片:background-imge,默认是none,语法为background-imge:url(路径);
背景重复:默认背景图会在水平和垂直方向上平铺,出现类似墙纸的效果,通过background-repeat来设置平铺效果;语法为:background-repeat:value;(取值为repeat(平铺 默认) repeat-x(水平方向平铺) repeat-y(垂直) no-repeat(不平铺,图像只显一次))
背景尺寸:规定图片的尺寸,其语法为:background-size:value1 宽度value2高度 ,可以取值百分比 像素 cover(让背景图等比拉伸,以充满整个元素,可能导致某些无法显示)/contain(保持图像的宽高比不变将图片压缩或拉伸到宽度或高度正好适应元素的区域,此时不一定充满整个元素)
背景图片的固定:默认情况下,背景图会随着页面的滚动而滚动,有时我们需要背景图固定不动,这时就要用到background-attachment,语法为:background-attachment:value; value可取值scoll(不固定)fixed(固定)
背景定位:修改背景图在背景中的位置,语法为:background-position:value;value可以为 x y(表示背景图沿着x轴y轴的长度,)/x% y%(),还可以为left/right/top/bottom/center
背景绘制区域:background-clip,可取值为:border-box(背景被裁剪到边框)padding-box(背景被裁剪到内边内容区域
content-box(背景被裁剪到内容区域)
背景定位区域:background-origin,可取值为:border-box () padding-box() content-box()
简写方式:baground属性,在一个声明中设置所有的背景属性,语法结构为:background:color url() repeat attachment