CSS学习:css的背景图片的处理

作者: 来源: 更新时间:2013-03-02 12:12:36 点击:

css的背景图片是设计一个漂亮网页的关键之处

background-image

url("图片相对于样式表的路径")

注意:url是图片相对于样式表的路径,而非相对于当前网页的路径,路径可以加引号也可以不加引号

控制重复

background-repeat

no-repet repeat repeat-x repeat-y

 

控制位置

background-position

关键字 px em 百分比

其中关键字包括,水平方向上的关键字 left center right 垂直方向的关键字 top center bottom 如果一个关键字省略,默认为center。

em 是相对于字号,而百分比比较特殊,它的意思是将图片指定百分比处和相关元素对应的百分比对齐:

如果百分比值只有一个,那么另一个值默认为50%

注意:

1 px em作用的是图片的顶边和左边,不能作用于图片的右边和下边,px em 百分比之间可以混用,但是它们都不能和关键字混用。

2 px em适用于精确定位,但要使图片随元素的宽度变化而位置发生改变,百分比可以起到作用

3 这个属性常结合background-repeat使用,控制图片重复的起点

固定图片

background-attachment

fixed scroll

快捷方法

用background属性一次指定