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

background-position用法详解

时间:2018-12-28 16:40:10      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:定位   100%   用法详解   不同   背景图   坐标   class   背景图片   center   

 background-position的值有三种表示方法,分别有不同的含义:
1)百分比   (容器的内容宽度-背景图片的宽度)*对应的百分比 即为图片要移动的距离    如果您仅规定了一个值,另一个值将是 50%。
2)长度值  如:px 、em、rem等 图片直接在默认位置向左、向下移动对应长度值即可  

      如果您仅规定了一个值,另一个值将是50%。您可以混合使用 % 和 position 值。

3)关键词  top/bottom/right/left/center   如果您仅规定了一个关键词,那么第二个值将是"center"。

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;(居中显示)

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

background-position用法详解

标签:定位   100%   用法详解   不同   背景图   坐标   class   背景图片   center   

原文地址:https://www.cnblogs.com/cui-ting/p/10191199.html

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