background-position x/y的取值为啥是负值

最新推荐文章于 2019-08-13 11:08:07 发布
最新推荐文章于 2019-08-13 11:08:07 发布
阅读量1.6k 收藏 5
点赞数 5
分类专栏： web前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gzyzwx/article/details/89363681
版权

1、可以这样理解

background-position的元素的左上角为顶点（0，0），xy正方向是朝右朝下的，元素左上角要回到容器左上角，这个时候，整个背景图需要向上和向左偏移，则x和y都是负值，这个时候，整个背景图中，你想要展示的图案，就会往左上移动，所以说使用background-position的值都是负值。

图例

 图中的图案，就是元素；

gzyzwx
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中背景background-position负值定位
12-27
CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位
background-position 用法详细介绍
热门推荐
JeamKing的专栏
05-22 11万+
语法：background-position : length || length background-position : position || position 取值：length  : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位  position  : top | center | bottom | left | center |
背景定位：background-position：水平 垂直；
qingyisuo的博客
01-12 844
背景定位，在大的背景图里找背景图中的小区域，同时需要注意的时在已经定好的区域里，background-position：0px 0px;是背景图片左顶点和区域坐标原定重合，如图一，更重要的是这个背景定位需要移动的是图片，区域坐标原定是参照物，所以大部分找小区域多需要用到负数（-xxPX）,概念不多说，附图图一： 图二： 在background-position：x y;中： X为负数
css 之 background-position-x
10-30
css 之 background-position-x
使用background-position
iteye_15462的博客
09-07 165
css里有个background-position 属性，用来设定背景图沿x ,y 方向的偏移量 可以设置像素值，百分比，或者固定的值,如top,bottom,center, left,right   下面例子中用的图片大小是200*200的，容器是300*280的 一般情况下设定 background-repeat: no-repeat 且 容器大于图片，图片位于左上角，如下图  此...
CSS从大图中抠取小图完整教程(background-position应用)
weixin_33888907的博客
06-01 413
       相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象：网页中很多图片素材被合成在一张图片上。        起初小菜模仿网站的时候，经常遇到这个现象，那时候也不知道这时什么技术，人家的整张图片素材不会利用，只能用ps切图，切成单个的再用。。。        其实，这是一个非常简单的技术，就是因为想象的太难了，才一直找不到问题的关键。        要想实现CSS抠图，只需要用到...
background-position为什么会出现负值？
qq_44633891的博客
08-13 1018
概念 background-position：设置背景图像的起始位置。 实验分析 html代码：设置一个box用于显示图片。 1 <div class="box"></div> css属性设置： 1 2 3 4 5 6 7 8 9 ...
CSS中背景background-position负值定位深入理解
V天使之翼V
04-06 179
这段时间在写毕业设计，想像淘宝那样把所有使用的图片都放到一张大图上。结果总是不成功，CSS的background-position属性还没有搞的太懂，于是网上搜了一篇文章：原址是：http://www.52css.com/article.asp?id=520   CSS中背景定位background-position负值一直是不好理解的难点，一方面用的比较少，另一方面的理解的不够深入，今天花了点时...
css background-position 用法详细图文介绍
12-10
语法：background-position : length || length background-position : position || position 取值：length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 position : top | center | ...
CSS中背景background-position负值定位深入理解[图文]
09-25
CSS中背景定位background-position负值一直是不好理解的难点，一方面用的比较少，另一方面的理解的不够深入，今天花了点时间认真的思考了，把我的心得写出来
对背景图定位中background-position属性的自我理解
09-22
最近在项目中需要大量的用到很多标签按钮什么的零碎图片，加上一直没机会使用Css中的”精灵技术“，这里把我对background-position的理解写成文档供更多人使用学习;如果有不对的请大家使劲拍
CSS background-position的使用说明详解
09-25
设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响
css3 :first-child、:nth-child(1)选择第一个元素不起作用的解决方案
gzyzwx的博客
10-25 2万+
当我写一段页面结构如下（以微信小程序为例，传统网页div结构是一样的道理） &lt;view class='seller-info-container'&gt; &lt;view class='seller-avatar-content'&gt; &lt;image&gt;&lt;/image&gt; &lt;/view&gt; &lt;view clas...
微信小程序错误码40029 {"errcode":40029,"errmsg":invalid code, hints: [ req_id: eSNALA03934126 ]"
gzyzwx的博客
08-28 1万+
产生该报错原因 前端跟后端，配置的AppID不同 我产生此次错误的原因是 在创建微信小程序项目的时候，因为微信官方还没有申请通过微信小程序的AppID，所以拿了之前的微信小程序AppID代替使用，导致跟后端联调接口的时候，传递过去的code，encryptedData，iv，会提示拿不到session_key尝试修改project.config.json中的AppID，会发现毫无效果； ...
行内元素如span（微信小程序text标签）等，在编辑器enter换行导致页面显示存在空格的处理
gzyzwx的博客
08-07 1万+
这里以微信小程序text标签为例 1、产生空格代码（这里的:为英文字符） &lt;view class='time-text'&gt; 距结束 &lt;text&gt;{{data.countDownDay}}&lt;/text&gt;天 &lt;text&gt;{{data.countDownHour}}&lt;/text&gt;: &lt;text&gt;{{data.countD...
css 实现image宽度百分百，高度跟宽度一样大小
gzyzwx的博客
07-24 1万+
前言：第一次写博客（不知道从何说起），希望以后再接再励。之前也遇到很多问题，有总结过，但是没有写出来（改天继续贴出其他总结），今天遇见css 实现image宽度百分百，高度跟宽度一样大小这个问题。贴出解决方案一个   1、写两个div盒子，父子关系 &lt;div class="image"&gt; &lt;img :src="food.image"&gt; &lt;/div&gt; 2、...
解决wx.setTabBarBadge 只能在tabBar页调用的问题
gzyzwx的博客
11-20 1万+
1、问题描述 wx.setTabBarBadge 这个API在非tabbar页面上调用会失效。 假如我在首页（一堆商品），进入到商品详情页，把商品加入到购物车，这时候，想要购物车（tabBar页显示购物车数量） 注意！！！ 在商品详情页直接调用wx.setTabBarBadge，然后回到tabBar页，会发现没效果 解决方案 1、在商品详情页加入购物车成功时 设置app.globalData.c...
background-position-x
最新发布
09-23
### 回答1： background-position-x是CSS属性中的一个，用于设置背景图像在水平方向上的位置。它可以接受像素值、百分比值、关键字（如left、center、right）等作为参数，用于控制背景图像在水平方向上的位置。 ### 回答2： background-position-x 是 CSS 属性，用于设置背景图像在选定元素中的水平位置。 这个属性可以取各种值，包括像素值、百分比和关键字。 当我们设置一个长度单位的数值时，表示背景图像的起始点相对于选定元素的左边缘的偏移量。负值会将图像左移，正值会将图像右移。 当我们设置一个百分数数值时，表示背景图像的起始点相对于选定元素的宽度的百分比偏移量。0% 表示起始点与左边缘对齐，100% 表示起始点与右边缘对齐。 此外，也可以使用关键字来设定背景图像的水平位置。比如设置为 "left" 将背景图像的起始点与选定元素的左边缘对齐，设置为 "right" 将起始点与右边缘对齐，设置为 "center" 将起始点与选定元素的水平中心对齐。 当我们只设置一个属性值时，background-position-x 将会自动设置为默认值。默认情况下，背景图像的水平位置会与背景图像的垂直位置相对应。也就是说，如果设置了 background-position-y，而没有设置 background-position-x，那么背景图像的水平位置将与垂直位置保持一致。 总之，通过使用 background-position-x 属性，我们可以控制背景图像在元素中的水平位置，从而实现更加精确的背景图像定位效果。 ### 回答3： background-position-x是CSS中用来设置背景图像的X轴位置的属性。通常情况下，背景图像是根据元素的左上角进行定位的，而background-position-x可以让我们通过设置X轴位置的值来改变背景图像在元素中的位置。 background-position-x属性可以使用具体的长度值，也可以使用关键字来表示位置。常用的关键字有：left、center和right。其中，left表示将背景图像定位在元素的左边界，center表示将背景图像居中显示，right表示将背景图像定位在元素的右边界。 此外，我们还可以使用百分比来表示X轴的位置。当使用百分比时，背景图像的定位点会相对于元素的宽度进行计算。例如，如果设置了background-position-x为50%，那么背景图像的定位点就会在元素的中心位置。 如果只使用background-position-x来设置X轴位置，则Y轴位置默认为50%，即背景图像的定位点在元素的垂直中心位置。 总之，background-position-x属性是用来控制背景图像在X轴上的位置的，通过设置具体的长度值或者关键字，可以实现不同的定位效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值