< p>
<
< span>css背景在网页设计中使用频率非常高,然而对于这个开发人员很熟悉的css属性,却隐藏着许多不为初级开发人员熟知的细节,这篇文章尝试扒开这层不为人知的面纱。< 所以结论是< strong>:css2< >元素颜色背景的显示范围与< >css2.1< >、< >并不相同。在< >中(支持ie6),颜色背景的显示范围是指内部留白(包括< >padding< >)之内的范围< >,不包括边框;在< >和< >中(包括< >ie8< >以上测试),背景在整个盒模型中,它是布满整个元素的盒子区域的(但是仍然不包括外边< >margin< >范围)< >。< strong>< >2.background-image:none || < > < >首先列举一下< >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>这个复合属性就不多说了,它可以将其他的属性值写在一起< 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环境中测试如下右图所示。< > <
< >元素的图片背景是元素的总大小,包括< >border< >(但不包括< >)。< span>默认情况下,< >放置在元素的左上角,< >并重复垂直和水平方向< >(< >后面会讲到< >默认值为< >0% 0%,background-repeat默认是repeat)< >,< >与< >的默认覆盖范围是相同的,< strong>在现代标准浏览器中< span>铺满padding和border,在ie6中却不包括边框。< span>
< >