平面设计

网站技术

最新推荐

图解CSS背景图片对齐方式——background-position
2009/4/12 0:47:22 | 点击:0

CSS的对象背景图片对齐方式其实挺让人迷糊的。所以特制作这个图解页面。

手册这么说:

 

基本特性

初始值: 0% 0%  适用于: 块状元素和替换元素(block-level and replaced elements ) 
继承性: 无  百分比: 根据元素大小(refer to the size of the box itself) 
媒体: visual  版本: CSS1 
兼容性: IE4+ NS6+ 

    

基本语法
background-position : length || length
background-position : position || position

 

语法取值
length :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 position :  top | center | bottom | left | center | right

 

使用说明
设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。对应的脚本特性为 backgroundPosition 。

 

总结:
百分比对齐方式比较让人迷糊:20% 30% 表示在水平方向上,图片的 20% 位置对准元素的 20% 位置;在垂直方向上,图片的 30% 位置对准元素的 30% 位置。所以同理,0% 0% 就表示左上角对齐,100% 100% 表示右下角对齐。

 

http://xiebr.com/temp/position/position.htm

打印】【关闭
脱兔数据 - totodata.com -网页设计,页面设计,包装设计,VI设计,标志设计,营销策划,广告设计,卫生巾包装设计,卫生纸包装设计,生活用纸包装设计,纸尿裤包装设计,纸巾包装设计,湿纸巾包装设计
本站由 脱兔数据 - totodata.com 创建并提供技术支持!〖xiebr@sohu.com QQ:498983562〗