1.元素背景指的是哪些区域默认情况下，元素的背景是指元素的边框（包括border）以内的区域。在CSS3中，可以使用background-clip改变元素的背景区域。1.1background-clip指定应用元素上背景的绘制区域。元素盒模型包括content、padding、border、margin。默认背景绘制区域包括：content+padding+border，不包括margin区域。该属性可用于控制绘制区域。背景剪辑：边框框|填充框|内容框|初始|继承|文本；其中文字的价值比较昂贵，即背景只显示在文字区域，可以实现漂亮的文字。这个属性color可以影响背景的颜色类型和图片类型；背景只能在drawable区域绘制，其他区域如margin区域不会绘制。2.背景颜色2.1background-color指定背景颜色，只能设置一个颜色值。特殊颜色值：透明也是默认值；background-color的应用范围可以通过background-clip属性进行控制；background-clip属性必须先使用背景颜色属性，否则background-clip属性无效（背景图片没有这个问题）。3.背景图3.1指定背景图1)background-image为元素指定一个或多个图像类型的背景（只能指定一种背景颜色）。CSS3可以指定多个背景图像。多张图片用逗号隔开，多张背景图片上可以使用其他相关属性，也用逗号隔开。多个背景图片的显示相互独立，互不影响；可以同时指定背景图片和背景颜色；背景图片本身有自己的大小（background-size），应用的元素也有自己的大小。应用元素未被背景图覆盖的区域会通过重复绘制背景图来覆盖整个绘图区域（当然可以通过CSS属性修改默认方式）。3.2背景图片相关的属性背景图片本身有自己的尺寸（background-size），应用的元素也有自己的尺寸。可以对背景图像执行更复杂的操作。1）background-origin原点（origin）是指要绘制的背景图片的起始点。默认情况下，原点在应用元素的填充区域的左上角。可以通过background-origin属性修改原点位置。从原点向右是X坐标轴的正方向，向下是Y坐标轴的正方向。背景图开始根据这个坐标系重复绘制背景图。重复绘制坐标系的相反方向。background-origin:padding-box|border-box|content-box|initial|inherit;原点坐标系为矩形区域；我们可能想当然地认为背景绘制区（backgroud-clip）的左上角就是背景图绘制的原点，其实不然，它们之间没有必然关系：首先，默认origin和绘图区域的值是不同的，甚至origin可能在绘图区域之外2)background-position背景图片的左上角称为背景图片的位置。位置是相对于原点构建的坐标系，默认为原点。图片相对于原点移动的位置可以通过background-position指定（也可以认为是将背景图片移动到指定位置）。背景位置-x:xpos|继承|初始化；背景位置-y：ypos|继承|initail;//缩写形式background-position:xpos[ypos]|角度相对原点在X轴方向移动；百分比：计算方法比较奇怪。比如background-position-x:10%并不是说图片的左上角相对于原点X轴方向移动10%，而是说背景图片在X轴的位置direction为10%（根据图片大小计算）与原点坐标在X轴方向的10%%位置（根据原点矩形宽度计算）对齐。计算方式有点绕，主要目的是通过这种计算方式轻松实现背景图片的对齐：比如0%表示左对齐，50%表示居中，100%表示右对齐。关键字left：表示图片左侧与原点矩形左侧对齐，相当于0%，0关键字center：表示背景图片在原点矩形左右居中，相当于50%关键字right：表示图片右侧与原点矩形右侧对齐，相当于100%ypos值：绝对值：相对于原点Y轴方向距离百分比：类似xpos值百分比关键字top：表示图片顶部与原点矩形顶部对齐，相当于0%，0关键字center：表示背景图片在原点矩形上下居中，相当于50%.关键字bottom：表示背景图片的底部与原点矩形的底边对齐，相当于100%。距离，百分比值控制图像对齐，关键字值是对齐的简写。3)background-repeat一方面，背景图像可能比背景区域小。另一方面，背景图像是从原点位置绘制的，部分背景区域可能位于原点坐标系的负方向。对于那些没有被背景图覆盖的区域，浏览器会默认从左到右，从上到下重复绘制背景图，原点的负方向也是这样重叠的。background-repeat属性可以控制背景图片是否重复以及如何重复绘制。背景重复：重复|重复-x|重复-y|空间|圆形|初始|继承repeat-x,repeat-y,repeat是浏览器的默认行为：从上到下，从左到右，背景图片可能是裁剪空间允许背景图片尽可能重复不裁剪，如果有是一个额外的间隙，它在每个背景图像之间平均分配。请注意，空格仅确保不剪切原点矩形内的背景图像。对于那些不在原点矩形之外的背景区域，通过切割重复。roundround类似于space，但是如果有多余的空隙，背景图会被缩放占用。空白。Stretch：多余空间小于背景图的一半Compression：多余空间大于背景图的一半注意round类似于空间，round只保证原点矩形内的背景图不被裁切。对于那些不在原点矩形外的背景区域，仍然是Repeatbycutting。4)background-size背景图片可能有原始大小，可以通过background-size指定背景图片的大小，然后对背景图片进行缩放。背景大小：自动|宽度[高度]|封面|包含|初始化|inheritauto表示使用图片本身的大小；width[height]指定具体长度，绝对值指定相对于原点矩形大小的具体数值百分比来计算覆盖率首先要保证背景图平铺整个绘图区域。如果背景图像较小，则按等比例拉伸包含。首先，确保背景图片完整显示背景图片。如果背景图片较大，则等比例缩小。5)background-blend-mode指定多个背景图片的混合模式6)background-attachment指定背景图片的固定方式。背景附件：滚动|固定|本地|初始|继承；scroll：表示背景图片相对于元素本身是固定的，即随着应用元素的滚动而滚动；fixed：表示背景图片相对于元素视口是固定的，即不会随着应用元素的滚动而滚动；local：表示背景图片相对于被应用元素的内容是固定的，即如果被应用元素的内容滚动，它会随着被应用元素的内容滚动而滚动（注意和fixed的区别）。7）背景缩写格式背景：bg-colorbg-imageposition/bg-sizebg-repeatbg-originbg-clipbg-attachmentinitial|inherit；好吧，就这么长，记不住的话还是用具体的backgroud属性吧。方便的记忆方法：先确定背景类型如果是图片，再确定图片的属性（位置、大小、重复方式、绘图起点）确定绘图区背景图片的固定方式4.总结绘制元素背景的条件：首先确定背景Area；判断背景类型：颜色、图片；如果是图片，可以控制得更细一些。除了background-clip可以应用于background-color之外，其他的属性都用于background-image；如果background-clip的值为border-box，则边框会覆盖背景，即边框的颜色或图片会覆盖背景颜色或图片。
