码迷,mamicode.com
首页 > 其他好文 > 详细

background-position详细用法

时间:2015-07-05 10:50:17      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:

1、background-position:0 0;等于background-position:left top;(左上角)

2、background-position:100% 100%;等于background-position:right bottom;(右下角)

3、background-position:-70px -40px;(以左上角为0 0点坐标,向左偏移70px,向上偏移40px)

4、background-position:70px 40px;(以左上角为0 0点坐标,向右偏移70px,向下偏移40px)

5、background-position:50% 50%;等于background-position:center center;(居中显示)

     background-position:-50% -50%;

     等同于x:-{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
     等同于y:-{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。

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

background-position详细用法

标签:

原文地址:http://www.cnblogs.com/yang216/p/4621755.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!