我们都知道background-position属性用来指定背景图片应该出现的位置,可以使用关键字、绝对值和相对值进行指定。在CSS Sprites中,这个属性使用比较频繁,使用过程中,我常混淆,经常切不到自己想要的效果,于是决定好好理解其工作机制,这篇文章就是介绍background-position属性是如何指定背景图片和背景区域的位置关系。

注意:segmentfault对CodePen嵌入支持度不是很好,为使文章整洁,我将嵌入代码全部删除,完整体验请猛戳此处

background-position

我使用ps制作了一张400px × 400px的图片作为背景图片。

此处应有代码,猛戳此处!

为了更好理解background-position属性定位的机制,我们可以将指定背景区域想象为一个平面直角坐标系,原点在左上角,x轴正方向从左到右,y轴正方向从上到下,这点和平常向上为y轴正方向的坐标系有所不同。在这个坐标系中,通过指定x、y的坐标值定位一个点,此点即是背景图片的左上角。

此处应有代码,猛戳此处!

如上图所示,background-position指定值200px300px,即x为200px,y为300px,此点所在位置就是背景图片的左上角,因为部分背景图片因溢出背景区域被裁剪,就只剩下200px × 100px的左上角部分。

此处应有代码,猛戳此处!

可以指定正值就当然可以指定负值,如上所示,此时左上角被定位在(0px, -300px)处,因为向上为y轴负方向,背景图片上半的300px就因溢出被切除了,只留下400px × 100px的下部分。

此处应有代码,猛戳此处!

除了使用绝对值,也可以使用相对值指定。使用相对值时,定位方式直观上不好理解。但应清楚,最基本的方法是根据绝对值定位。使用相对值时它会将其转换,最终还是根据绝对值指定背景图片的左上角,转化的依据是x = (容器的宽度-图片的宽度) * percentX;y = (容器的高度-图片的高度) * percentY。上图经过计算,背景图片左上角被定位在(-200px, 0px)处,故背景图片被切除一半。

此处应有代码,猛戳此处!

我们也可以通过关键字topbottomleftrightcenter指定background-position属性,大家应该都喜欢这种简单明了的方式吧。一般指定两个关键字,如果只有一个,则另一个默认是center。这种方式也最终将转化成绝对值定位,不过先会转换成百分比,topbottomleftrightcenter分别相当于0%100%0%100%50%。上图中的background-position: right bottom;background-position: 100% 100%;效果是一模一样的。

CSS Sprites

使用上面介绍的理解方式,相信还是很好理解background-position的定位原理的。我想,background-position多数使用场景应该就是CSS Sprites了。CSS Sprites是一种网页图片应用处理方式,将一个页面涉及到的零星图片都包含到一张大图中去。这样一来,当访问该页面时,客户端只需要向服务器请求少量的图片,图片越多请求次数越少,造成延迟的可能性也就越小,能有效减轻服务器的压力;接下来应用CSS属性的background-imagebackground-position的组合进行背景定位,用数字精确地定位出背景图片的位置。


参考资料

CSS学习(二):背景图片如何定位?的更多相关文章

  1. css代码添加背景图片常用代码

    css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...

  2. Html CSS学习(五)position定位 原

    Html CSS学习(五)position定位 position用来对元素进行定位,其值有以下几种: static:无特殊定位,对象遵循正常文档流,top,right,bottom,left等属性不会 ...

  3. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  4. 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题

    在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...

  5. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  6. CSS 背景图片的定位和缩放

    在 CSS 中,利用 background-image 属性我们可以指定元素的背景图片,例如: .example { background-image: url(image/some.png); ba ...

  7. 【CSS学习】--- 背景

    一.前言 元素的背景区域包括:元素的内容.内边距和边框区域. CSS中用于设置背景的属性有: background-color 设置背景颜色 background-image 设置背景图片 backg ...

  8. css如何使背景图片水平居中

    CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-pos ...

  9. css 中的背景图片小技巧和存在的坑

    body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...

随机推荐

  1. C# Event (1) —— 我想搞个事件

    本文地址:https://www.cnblogs.com/oberon-zjt0806/p/15975299.html 本文最初来自于博客园 本文遵循CC BY-NC-SA 4.0协议,转载请注明出处 ...

  2. Jmeter-根据负载计算并发用户实际案例

    业务场景 假设公司领导现在给你分配了一个性能测试需求如下: 1:公司有1000人在上班时间段会登录平台进行打卡操作,可能会登录打卡多次2:业务高峰时间段在8:00-8:30,半小时3:需要保证90%用 ...

  3. 阿里云CND加速

    1: :2: 3: 4: 5: 6: 7:将解析信息如实添加 8:如果报错添加 CNAME 记录提示和 A 记录冲突,也就是说如果你要添加 CDN 全站加速,域名解析那里就不能再有 A 记录了, 只有 ...

  4. Java入土--Java基础(二)

    Java基础(二) 接上一讲,我们接着来聊聊Java的一些基础知识,下一讲就会进行流程的控制. 类型转换 首先呢,是类型的转换,接上一个内容的数据类型,类型转换就是数据类型更进一步的应用. 由于Jav ...

  5. 如何修改windows Server 2012 远程桌面连接默认端口

    如何修改windows Server 2012 远程桌面连接默认端口   修改windows 2012/win8.win7远程桌面连接默认端口一般需要修改注册表四个地方[HKEY_LOCAL_MACH ...

  6. LGP5204题解

    @CF1327F 最小值看着有点怪,先转化成最大值吧...反正没啥区别... 考虑把最大值相同的区间和限制为这个最大值的区间都拿出来.然后离散化.问题变为让所有区间都满足最值为 \(c\). 考虑 D ...

  7. web自动化之selenium(六)利用坐标点定位

    这是通过第三发库实现对元素的定位,因为在无法定位元素的时候,只能通过外部来定位,此时就可以使用pyautogui模块,操作鼠标,模拟人进行操作 # 使用注意事项,不要过于的依赖它 1.使用时需要在通过 ...

  8. 什么是SaaS?

    SaaS的定义 SaaS,是Software-as-a-Service的缩写名称,意思为软件即服务,即通过网络提供软件服务. SaaS平台供应商将应用软件统一部署在自己的服务器上,客户可以根据工作实际 ...

  9. AOP源码解析之二-创建AOP代理前传,获取AOP信息

    AOP源码解析之二-创建AOP代理前传,获取AOP信息. 上篇文章对AOP的基本概念说清楚了,那么接下来的AOP还剩下两个大的步骤获取定义的AOP信息,生成代理对象扔到beanFactory中. 本篇 ...

  10. docker-compose.yml 版本问题

    Docker Engine 与docker-compose version 之间的有以下关系: Compose file format Docker Engine 1 1.9.0+ 2.0 1.10. ...