CSS精灵图坐标取负值原因

最新推荐文章于 2024-08-12 07:38:58 发布
最新推荐文章于 2024-08-12 07:38:58 发布
阅读量713 收藏 3
点赞数 2
文章标签： css cocos2d css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1071626267/article/details/125120677
版权
  • 精灵图主要针对小的背景图片使用
  • 精灵图的显示主要借助于背景位置来实现——background-position
  • 网页中的坐标：x轴右边是正值，左边是负值，y轴下边是正值，上边是负值
  • 一般情况下精灵图都是负值，因为盒子是固定的，固定在精灵图的左上角顶点处，想要取精灵图除了第一个图形，只能把精灵图往左上角移动，对应坐标就是-（具体移动像素值）px，-（具体移动像素值）px
小陈努力再努力
关注
如何一键制作css精灵图？
刘杨造梦的博客
07-05 349
精灵图是什么？一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。 因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。使用精灵图核心： 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。 这个大
HTML+CSS学习07-精灵图和字体图标
Meowmow的博客
05-04 397
目录元素的显示与隐藏displayvisibilityoverflow精灵图（雪碧图）字体图标iconfont字体图标的下载字体图标的引用CSS三角应用：对话框样式 元素的显示与隐藏 display display:none; //隐藏对象，不再占有原位置 display:block; //转换元素为块级对象，显示元素 visibility visibility:visible; //元素可视 visibility:hidden; //元素隐藏，继续占有原位置 overflow overflow:hid
css精灵技术用像素定位,css精灵图怎么定位
weixin_33600816的博客
08-03 873
精灵图利用background-image，background-repeat，background-position的组合进行背景定位，background-position属性可以用数字能精确的定位出背景图片在布局盒子对象位置。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。css精灵图，其实就是通过将多个图片融合到一张图里面，然后通过CSS...
CSS背景图坐标定位详解，为什么会有负数？
mituan1234567的专栏
09-07 3563
http://bbs.189works.com/thread-62215-1-1.html 背景图像定位中我们要明确的几点：        1、两个值前面一个是横向的定位，我们称为x轴方向定位。后面一个值是纵向的定位，我们称为y轴方向定位。如果只有一个值，那默认的就是x轴方向，这时y轴方向就默认的是上下居中对齐，也就是center。   2、坐标轴的原点就是对应容器的左顶点。
CSS：精灵图的使用
最新发布
听海边涛声
08-12 234
CSS：精灵图的使用
css sprite 坐标定位为何为负以及定位方法
curry_zhao的博客
12-10 2740
用这个的时候，关于最后的 background-position 属性2个参数理解出了偏差，网上很多地方都没解释清楚。特意查了下了解清楚（源于脚本之家）。 说说原理先： CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景
background-position x/y的取值为啥是负值
gzyzwx的博客
04-17 1718
1、可以这样理解 background-position的元素的左上角为顶点（0，0），xy正方向是朝右朝下的，元素左上角要回到容器左上角，这个时候，整个背景图需要向上和向左偏移，则x和y都是负值，这个时候，整个背景图中，你想要展示的图案，就会往左上移动，所以说使用background-position的值都是负值。 图例 图中的图案，就是元素； ...
CSS 精灵图
atrainee的博客
07-15 621
用途： 防止图像过多时，向服务器频繁地请求图片，使服务器压力过大，降低页面的加载速度。 通过精灵图，将小图片集合在一张图中，减少请求的次数，提高页面的加载速度。 使用： 精灵图（Sprite）主要用于不常更换的背景图 使用background-position:移动x，y 横纵坐标 精灵图坐标一般是负值（将图片往上往左移动） 示例代码： 图片向左移动180px,纵向不动 根据CSS层叠性，其他地方的图片显示只需要更改背景图片位置 .bg { /* 注意坐标为负值
CSS精灵图,字体图标,三角型制作,css布局
qq_45994446的博客
07-09 208
有效减少服务器接收和发送请求的次数,提高页面加载速度;某个位置要用某个图的时候，先把这个大的图（小图的集合）调用过来，通过挪动位置（x，y轴）来定位到里面的小图(1)精灵技术主要针对背景图使用,就是把多个小背景图整合到一张大图片中(2)这个大图片称为sprites精灵图或者雪碧图(3)移动背景图片位置,使用background-position(4)移动的距离就是目标图片的x和y坐标,x越往右越大,y越往下越大;(5)一般情况是往上往左移动,所以数值是负值;
Clip技术下CSS精灵图制作指南
什么是CSS精灵图 CSS精灵图是将多个小图标、图片等合并到一张大图中，通过控制背景图位置来显示不同的图标，以减少HTTP请求，提高网页加载速度。在网页设计中，使用CSS精灵图能有效减小页面所需资源文件大小，提升...
CSS 背景图标（雪碧图、精灵图、iconfont）
Ares5k
04-12 1575
雪碧图（精灵图）、iconfont
CSS背景图坐标定位详解及负数的使用技巧
迷路的鲸鱼
12-23 1024
背景图像定位中我们要明确的几点： 1、两个值前面一个是横向的定位，我们称为x轴方向定位。后面一个值是纵向的定位，我们称为y轴方向定位。如果只有一个值，那默认的就是x轴方向，这时y轴方向就默认的是上下居中对齐，也就是center。 2、坐标轴的原点就是对应容器的左顶点。 3、这个坐标的y轴箭头朝下，也就是右下方（容器内部）x y的值才都为正。 4、x y值分别表示背景图片的左顶点相对于坐标原点（也就...
精灵图、定位
x111223的博客
10-08 905
css 精灵 英文叫法”css sprites“ 也成”精灵图、雪碧图“，通常被解释为”css图像拼合“或”css贴图定位“。其实就是把一些”背景图片“ 整合到一张图片文件中，在利用“背景定位”显示合适的图片。一般精灵图适合小背景，不适合大背景。
精灵图的使用-（坐标标识）
阿牛哥的博客
12-14 2786
精灵图主要针对小的背景图片来使用。 主要借助于背景图片的来实现-`background-position`。 学废了嘛，兄弟们
html精灵图坐标如何确定,CSS实现精灵图与字体图标
weixin_29956903的博客
05-31 639
精灵图：在以前，每个图片资源都是独立的一张张图片，浏览器访问网站中的不同网页时是重复获取这一张张图片的，这代表需要访问很多次资源。为了减少资源的访问次数，将多个常用的图片集合到一张图片中(网页的缓存机制是会略去本地已经有的资源，如果前一次获取到了这个资源，那么后面不会再访问了，直到缓存的资源失效了。【意思有点类似去游乐园，有些票能玩所有游戏，而有些票只能玩一个游戏，如果你拿着能玩所有游戏的票，那你...
html精灵图坐标如何确定,如何使用HTML中的精灵图
weixin_35843830的博客
05-31 1578
在我们进行网页布局的时候经常会遇到以下的情况一排或多排文字上/下/左/右会有对应的小图标或图片，比如下图，1.png如果一张图片一张图片的去引入，不仅费时费力，还费资源。那这个时候该如何去快速的去把它做出来呢这时候就可以用精灵图去做了，精灵图又叫雪碧图，至于它为什么这么叫呢，说实话我也不知道你特么这是在逗我.jpg好了言归正传，该怎么去做呢？首先我们需要去做一张精灵图，至于怎么做，你可以用ps呀，...
2.7css精灵图 字体图标 三角 用户界面样式 布局技巧 文字溢出省略号
weixin_65223633的博客
01-23 268
精灵图（sprites） 精灵图的目的：为了有效减少服务器接受和发送请求的次数，提高页面的加载速度 background-position: x y; 使用精灵图核心： 精灵图技术针对背景图片使用。把多个小背景图片合到一张大图片中 移动距离就是这个目标图片的x和y坐标，且精灵图一般都是负值（一般情况都是往左往上移动，所以数值是负值） 使用精灵图时要精确测量每个小背景图片的大小和位置 精灵图有诸多优点，但缺点很明显： 图片文件还是较大 图片本身放大和缩小会失真 一旦图片制作完毕想要换非常
css样式之精灵图与字体图标跟多行显示省略号
weixin_53155105的博客
08-03 521
为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送 请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。 因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。 核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了 使用精灵图核心总结： 1. 精灵图主要针对于小的背景图片使用。 2. 主要借助于背景位置
精灵表坐标查看器-canvas学习第三天
RisaSama的博客
05-10 469
先来看效果图 JavaScript的代码 var canvas = document.getElementById('canvas'), readout = document.getElementById('readout'), context = canvas.getContext('2d'), spritesheet = new Image(); //Functions //将鼠...
一个小案例让你学会使用CSS精灵图
weixin_44164982的博客
07-15 814
精灵图的使用------很多小问题我们稍微一看就懂，比如静态网页中精灵图的使用这个问题。这时候如果能动手敲一敲代码练习一下，这个知识点在我们的学习过程中，就从“懂”的状态变成“会”的状态了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值