你不知道的CSS背景—css背景属性全解

 < p>

 <

< span>css背景在网页设计中使用频率非常高，然而对于这个开发人员很熟悉的css属性，却隐藏着许多不为初级开发人员熟知的细节，这篇文章尝试扒开这层不为人知的面纱。<

< > < >首先列举一下< >css< >中关于元素背景的所有属性并简要描述了其作用，其中后面几个属性是在< >css3< >中新加入的。<

属性< td> >描述< >备注< < tr> >background< >简写属性，作用是将背景属性设置在一个声明中。< >background-color< >设置元素背景颜色< >background-image< >把图像设置为背景< >background-repeat< >设置背景图像是否及如何重复。< >仅作用与背景图片，不会影响背景颜色< >background-position< >设置背景图像的起始位置。< >background-attachment< >背景图像是否固定或者随着页面的其余部分滚动。< >background-origin< >规定背景图片的定位区域。< >css3， >background-clip< >规定背景的绘制区域。< >css3同时作用域背景图片和背景颜色< >background-size< >规定背景图片的尺寸。< tbody> table> class="line" >下面一一< >“理清”这些属性< span>这个复合属性就不多说了，它可以将其他的属性值写在一起< 1< div> >background:[background-color< code>>] [,background-image] [,background-repeat] [,background-attachment] [,background-position]...< code>< 1.background-color< h3> >可以使用十六进制颜色、< >rgb< >颜色、< >rgba< >hsl< >色彩、< >hsla< >颜色< > 、< >颜色关键字等表示的颜色< > ，然而很多初级开发者不清楚的是backgroud-color在元素盒模型中覆盖的范围是多大。下面我们测试一下：< >2< >3< >4< >5< >6< >7< >8< >9< >10< >11< >12< >13< >14< >15< >16< >17< >18< >19< >20< >21< >22< >23< >24< >25< >html< code> lang< >"en"< >>< >head< >    < >meta< >charset< >"utf-8"< >title< >>document< >style< >type< >"text css"< >        < >*{< >            < >margin: 0px;< >padding: >}< >div{< >width: 400px;< >height: 200px;< 20px;< 15px;< >border: 10px dotted red;< >background-color: green;        >body< >div< >>    code>为了验证背景颜色有没有铺盖到边框，这里设置了边框的样式为点线形式，在现代标准浏览器中测试（包括ie8及以上< >）如下左图所示，而在ie6环境中测试如下右图所示。< >     < 所以结论是< strong>:css2< >元素颜色背景的显示范围与< >css2.1< >、< >并不相同。在< >中（支持ie6），颜色背景的显示范围是指内部留白（包括< >padding< >）之内的范围< >，不包括边框；在< >和< >中（包括< >ie8< >以上测试），背景在整个盒模型中，它是布满整个元素的盒子区域的（但是仍然不包括外边< >margin< >范围）< >。< strong>< >2.background-image:none ||  < url>< span> < >元素的图片背景是元素的总大小，包括< >border< >（但不包括< >）。< span>默认情况下，< >放置在元素的左上角,< >并重复垂直和水平方向< >(< >后面会讲到< >默认值为< >0% 0%,background-repeat默认是repeat)< >,< >与< >的默认覆盖范围是相同的，< strong>在现代标准浏览器中< span>铺满padding和border，在ie6中却不包括边框。< span> < >