- 1、本文档共21页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
CSS背景属性ackground详解
CSS背景属性Background详解
本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性。如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解。
css2 中的背景(background)
CSS2 中有5个主要的背景(background)属性,它们是:
background-color:?指定填充背景的颜色。background-image:?引用图片作为背景。background-position:?指定元素背景图片的位置。background-repeat:?决定是否重复背景图片。background-attachment:?决定背景图是否随页面滚动。
?
?
这些属性可以全部合并为一个缩写属性: background。需要注意的一个要点是背景占据元素的所有内容区域,包括 padding 和 border,但是不包括元素的 margin。它在 Firefox, Safari ,Opera 以及 IE8 中工作正常,但是 IE6 和 IE7 中,background 没把 border 计算在内。
?
基本属性
背景色(background-color)
?
代码
background-color?属性用纯色来填充背景。有许多方式指定这个颜色,以下方式都得到相同的结果。background-color:?blue;background-color:?rgb(0,?0,?255);background-color:?#0000ff;background-color?也可被设置为透明(transparent),这会使得其下的元素可见。
?
?
背景图(background-image)
background-image 属性允许指定一个图片展示在背景中。可以和 background-color 连用,因此如果图片不重复地话,图片覆盖不到地地方都会被背景色填充。代码很简单,只需要记住,路径是相对于样式表的,因此以下的代码中,图片和样式表是 在同一个目录中的。
background-image:?url(image.jpg);
?
?
但是如果图片在一个名为 images 的子目录中,就应该是:
background-image:?url(images/image.jpg);
?
?
背景平铺(background-repeat)
设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。这也许是你需要的,但是有时会希望图片只出现一次,或者只在一个方向平铺。以下为可能的设置值和结果:
?
代码
background-repeat:?repeat;?/*?默认值,在水平和垂直方向平铺?*/background-repeat:?no-repeat;?/*?不平铺。图片只展示一次。?*/background-repeat:?repeat-x;?/*?水平方向平铺(沿?x?轴)?*/background-repeat:?repeat-y;?/*?垂直方向平铺(沿?y?轴)?*/background-repeat:?inherit;?/*?继承父元素的?background-repeat?属性*/
?
?
背景定位(background-position)
background-position 属性用来控制背景图片在元素中的位置。技巧是,实际上指定的是图片左上角相对于元素左上角的位置。
?
下面的例子中,设置了一个背景图片并且用 background-position 属性来控制它的位置,同时也设置了?background-repeat?为?no-repeat。计量单位是像素。
第一个数字表示 x 轴(水平)位置,第二个是 y 轴(垂直) 位置。
?
代码
/*?例?1:?默认值?*/background-position:?0?0;?/*?元素的左上角?*//*?例?2:?把图片向右移动?*/background-position:?75px?0;/*?例?3:?把图片向左移动?*/background-position:?-75px?0;/*?例?4:?把图片向下移动?*/background-position:?0?100px;
?
?
?
background-position 属性可以用其它数值,关键词和百分比来指定,这比较有用,尤其是在元素尺寸不是用像素设置时。
关键词是不用解释的。x 轴上:
*?left*?center*?right
?
?
y 轴上:
*?top*?center*?bottom
?
?
顺序方面和使用像素值时的顺序几乎一样,首先是 x 轴,其次是 y
文档评论(0)