CSS学习(二):背景图片如何定位?
我们都知道background-position
属性用来指定背景图片应该出现的位置,可以使用关键字、绝对值和相对值进行指定。在CSS Sprites中,这个属性使用比较频繁,使用过程中,我常混淆,经常切不到自己想要的效果,于是决定好好理解其工作机制,这篇文章就是介绍background-position
属性是如何指定背景图片和背景区域的位置关系。
注意:segmentfault对CodePen嵌入支持度不是很好,为使文章整洁,我将嵌入代码全部删除,完整体验请猛戳此处!
background-position
我使用ps制作了一张400px × 400px的图片作为背景图片。
为了更好理解background-position
属性定位的机制,我们可以将指定背景区域想象为一个平面直角坐标系,原点在左上角,x轴正方向从左到右,y轴正方向从上到下,这点和平常向上为y轴正方向的坐标系有所不同。在这个坐标系中,通过指定x、y的坐标值定位一个点,此点即是背景图片的左上角。
如上图所示,background-position
指定值200px
和300px
,即x为200px
,y为300px
,此点所在位置就是背景图片的左上角,因为部分背景图片因溢出背景区域被裁剪,就只剩下200px × 100px的左上角部分。
可以指定正值就当然可以指定负值,如上所示,此时左上角被定位在(0px, -300px)
处,因为向上为y轴负方向,背景图片上半的300px就因溢出被切除了,只留下400px × 100px的下部分。
除了使用绝对值,也可以使用相对值指定。使用相对值时,定位方式直观上不好理解。但应清楚,最基本的方法是根据绝对值定位。使用相对值时它会将其转换,最终还是根据绝对值指定背景图片的左上角,转化的依据是x = (容器的宽度-图片的宽度) * percentX;y = (容器的高度-图片的高度) * percentY
。上图经过计算,背景图片左上角被定位在(-200px, 0px)
处,故背景图片被切除一半。
我们也可以通过关键字top
、bottom
、left
、right
和center
指定background-position
属性,大家应该都喜欢这种简单明了的方式吧。一般指定两个关键字,如果只有一个,则另一个默认是center
。这种方式也最终将转化成绝对值定位,不过先会转换成百分比,top
、bottom
、left
、right
和center
分别相当于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-image
、background-position
的组合进行背景定位,用数字精确地定位出背景图片的位置。
参考资料
CSS学习(二):背景图片如何定位?的更多相关文章
- css代码添加背景图片常用代码
css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...
- Html CSS学习(五)position定位 原
Html CSS学习(五)position定位 position用来对元素进行定位,其值有以下几种: static:无特殊定位,对象遵循正常文档流,top,right,bottom,left等属性不会 ...
- Vue项目打包发布后CSS中的背景图片不显示
相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...
- 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题
在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- CSS 背景图片的定位和缩放
在 CSS 中,利用 background-image 属性我们可以指定元素的背景图片,例如: .example { background-image: url(image/some.png); ba ...
- 【CSS学习】--- 背景
一.前言 元素的背景区域包括:元素的内容.内边距和边框区域. CSS中用于设置背景的属性有: background-color 设置背景颜色 background-image 设置背景图片 backg ...
- css如何使背景图片水平居中
CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-pos ...
- css 中的背景图片小技巧和存在的坑
body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...
随机推荐
- c语言怎么避免打印空数据?
目录 前景提要 解决方案 实战演练 1.数组搭建 2.在循环处,处理这个问题 3.在循环中,添加过滤条件. 4.扩展了其他类型的数组,都是可以通过这种方式进行过滤,最后,得到打印的时候,没有空值. 总 ...
- omnet++:官方文档翻译总结(三)
翻译总结自:Turning it Into a Real Network - OMNeT++ Technical Articles 接官方文档翻译总结(二),本节主要是真实网络的搭建 Part 4 - ...
- Python:collections.Counter
collections是Python内建的一个集合模块,其中提供了许多有用的集合类: namedtuple:只有属性的简易类 deque:双向增删的List ChainMap:多个字典的链接 Coun ...
- LeetCode-036-有效的数独
有效的数独 题目描述:请你判断一个 9x9 的数独是否有效.只需要 根据以下规则 ,验证已经填入的数字是否有效即可. 数字 1-9 在每一行只能出现一次. 数字 1-9 在每一列只能出现一次. 数字 ...
- ansible二进制部署kubernetes集群
kubernetes版本1.21.5 需要的资源文件请自行到我的阿里云盘下载 https://www.aliyundrive.com/s/zVegF78ATDV 修改主机信息 #根据自己的主机信息自行 ...
- TP5实现多文件上传及展示
view层上传: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- Laravel—数据库操作与Eloquent模型使用总结
数据库操作 执行原生SQL //查询 $emp = DB::select('select * from employees where emp_no = 1'); $emp = DB::select( ...
- PHP高并发商城秒杀
1.什么是秒杀 秒杀活动是一些购物平台推出的集中人气的活动,一般商品数量很少,价格很便宜,限定开始购买的时间,会在以秒为单位的时间内被购买一空.比如原价千元甚至万元的商品以一元的价格出售,但数量只有一 ...
- 全面解读 AWS Private 5G 的革新理念
目录 目录 目录 前言 近几年 AWS 在 5G ICT 领域的部署 AWS 与 Verizon 合作推出的 Private MEC 解决方案 AWS 与 Vodafone Business 合作推出 ...
- 将su模型导入arcgis,并获取高度信息,多面体转shp文件(ArcMap)
问题:将Sketchup中导出的su模型,导入arcgis并得到面shp文件,进而获取各建筑的高度.面积等信息. 思路: (1)导入arcgis得到多面体 (2)转为面shp文件 (3)计算高度/面积 ...