精确控制图片的位置

background-position
基本特性
初始值: 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 。
代码示例
1
2 BODY { background: url("banner.jpeg") right top }    /* 100%   0% */
3 BODY { background: url("banner.jpeg") top center }   /*  50%   0% */
4 BODY { background: url("banner.jpeg") center }       /*  50%  50% */
5 BODY { background: url("banner.jpeg") bottom }       /*  50% 100% */
6
7 BODY {
8   background-image: url("logo.png");
9   background-attachment: fixed;
10   background-position: 100% 100%;
11   background-repeat: no-repeat;
12 }
13
weinxin
我的微信
把最实用的经验,分享给最需要的读者,希望每一位来访的朋友都能有所收获!
avatar

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: