博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
background-position用法详解
阅读量:5945 次
发布时间:2019-06-19

本文共 875 字,大约阅读时间需要 2 分钟。

 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。

转载于:https://www.cnblogs.com/cui-ting/p/10191199.html

你可能感兴趣的文章
Token 防盗链详解
查看>>
BZOJ-1878: [SDOI2009]HH的项链(莫队算法)
查看>>
Python3 定时访问网页
查看>>
两种算法解决查找子串的问题:hdu1711
查看>>
老板,让我们专注的工作【写给老板的一封信】
查看>>
LBS突围:从微信到微博
查看>>
SFB 项目经验-40-Skype for Business-呼入正常-呼出不正常
查看>>
吴忌寒江卓尔批“闪电网络”背后,是链圈和矿圈的的利益之争
查看>>
python的cls,self,classmethod,staticmethod
查看>>
应用系统中常见报表类型解析
查看>>
[Silverlight入门系列]使用MVVM模式(9): 想在ViewModel中控制Storyboard动画?
查看>>
3 项目计划
查看>>
SQL Server 2008 下载地址(微软官方网站)
查看>>
如何对已经发布过的InfoPath模板进行修改
查看>>
推荐系统高峰论坛
查看>>
移动互联
查看>>
basic4android 开发教程翻译(三)IDE 小贴士
查看>>
看看async,await 是如何简化异步的调用WCF!
查看>>
obj-c 定义一个类
查看>>
电脑APK
查看>>