我们都知道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. maven通用镜像设置

    <mirrors> <mirror> <id>nexus-aliyun</id> <mirrorOf>central</mirrorO ...

  2. Qt:自动为class的所有属性生成getter、setter

    在类所在的.h文件中,右键类名,Refactor → Create Getter and Setter

  3. Python:PIL(一)——简介

    学习总结自:PIL官方文档 PIL(Python Image Library)是Python的一个图像处理库. 1.简介 PIL库中最重要的类是Image ①从文件中加载Image--open方法 f ...

  4. Pandas:loc iloc ix用法

    参考:Pandas中关于 loc \ iloc \ ix 用法的理解 相同点 使用形式都是 df.xxx[ para1 , para2 ] #xxx表示loc iloc ix#df表示一个DataFr ...

  5. UML类图的补充及软件设计原则

    UML类图的补充及软件设计原则 UML 从目标系统的不同角度出发,定义了用例图.类图.对象图.状态图.活动图.时序图.协作图.构件图.部署图等 9 种图. 1.uml补充 统一建模语言(Unified ...

  6. Excel VBA中写SQL,这些问题的方法你一定要牢记

    小爬之前的文章 [Excel VBA中写SQL,这些问题你一定为此头痛过]中详细讲诉了一些常见的VBA 中使用SQL遇到的问题,这里再补充两个常见的问题场景及对应的解决方案,希望你们看了后能够思路开阔 ...

  7. WPF-ListView单元格设置文字换行

    第2-6行 1 <ListView Name="HumidifyEventLog" Style="{StaticResource ListViewStyle}&qu ...

  8. Lua中如何实现类似gdb的断点调试—07支持通过函数名称添加断点

    我们之前已经支持了通过函数来添加断点,并且已经支持了行号的检查和自动修正.但是通过函数来添加断点有一些限制,如果在当前的位置无法访问目标函数,那我们就无法对其添加断点. 于是,本篇我们将扩展断点设置的 ...

  9. Kubernetes系列(一)Pod

    作者: LemonNan 原文地址: https://juejin.im/post/6862733649272537102 简单介绍 Pod 在 kubernetes 中是一个非常重要的基本概念, 别 ...

  10. python关于openpyxl库的常用使用介绍

    from openpyxl import load_workbook #只能加载已存在的表格 wb=load_workbook("D:\zhijing_work\测试数据\测试文件\yeta ...