CSS精灵图坐标取负值原因

最新推荐文章于 2023-10-08 21:10:19 发布
最新推荐文章于 2023-10-08 21:10:19 发布
阅读量653 收藏 3
点赞数 1
文章标签： css cocos2d css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1071626267/article/details/125120677
版权
  • 精灵图主要针对小的背景图片使用
  • 精灵图的显示主要借助于背景位置来实现——background-position
  • 网页中的坐标：x轴右边是正值，左边是负值，y轴下边是正值，上边是负值
  • 一般情况下精灵图都是负值，因为盒子是固定的，固定在精灵图的左上角顶点处，想要取精灵图除了第一个图形，只能把精灵图往左上角移动，对应坐标就是-（具体移动像素值）px，-（具体移动像素值）px
小陈努力再努力
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css精灵技术用像素定位,css精灵图怎么定位
weixin_33600816的博客
08-03 837
精灵图利用background-image，background-repeat，background-position的组合进行背景定位，background-position属性可以用数字能精确的定位出背景图片在布局盒子对象位置。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。css精灵图，其实就是通过将多个图片融合到一张图里面，然后通过CSS...
CSS背景图坐标定位详解，为什么会有负数？
mituan1234567的专栏
09-07 3482
http://bbs.189works.com/thread-62215-1-1.html 背景图像定位中我们要明确的几点：        1、两个值前面一个是横向的定位，我们称为x轴方向定位。后面一个值是纵向的定位，我们称为y轴方向定位。如果只有一个值，那默认的就是x轴方向，这时y轴方向就默认的是上下居中对齐，也就是center。   2、坐标轴的原点就是对应容器的左顶点。
css sprite 坐标定位为何为负以及定位方法
curry_zhao的博客
12-10 2652
用这个的时候，关于最后的 background-position 属性2个参数理解出了偏差，网上很多地方都没解释清楚。特意查了下了解清楚（源于脚本之家）。 说说原理先： CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景
background-position x/y的取值为啥是负值
gzyzwx的博客
04-17 1631
1、可以这样理解 background-position的元素的左上角为顶点（0，0），xy正方向是朝右朝下的，元素左上角要回到容器左上角，这个时候，整个背景图需要向上和向左偏移，则x和y都是负值，这个时候，整个背景图中，你想要展示的图案，就会往左上移动，所以说使用background-position的值都是负值。 图例 图中的图案，就是元素； ...
CSS 精灵图
atrainee的博客
07-15 575
用途： 防止图像过多时，向服务器频繁地请求图片，使服务器压力过大，降低页面的加载速度。 通过精灵图，将小图片集合在一张图中，减少请求的次数，提高页面的加载速度。 使用： 精灵图（Sprite）主要用于不常更换的背景图 使用background-position:移动x，y 横纵坐标 精灵图坐标一般是负值（将图片往上往左移动） 示例代码： 图片向左移动180px,纵向不动 根据CSS层叠性，其他地方的图片显示只需要更改背景图片位置 .bg { /* 注意坐标为负值
css按坐标取背景图示例代码
09-25
css按坐标取背景图在实际的div+css排版中还是比较实用的，总的来说使用比较频繁，可谓是前端必修，感兴趣的朋友可以了解下，希望对大家有所帮助
css3地图坐标点闪烁发光特效
04-25
css3地图坐标点闪烁发光特效是一款地图坐标点缩放闪烁从中心向四周扩散动画特效。
css精灵图压缩工具
08-10
css精灵图制作工具，简单方便，web开发精灵图制作工具。。必备
css精灵图片
10-31
css精灵图片配图
CSS背景图坐标定位详解及负数的使用技巧
迷路的鲸鱼
12-23 960
背景图像定位中我们要明确的几点： 1、两个值前面一个是横向的定位，我们称为x轴方向定位。后面一个值是纵向的定位，我们称为y轴方向定位。如果只有一个值，那默认的就是x轴方向，这时y轴方向就默认的是上下居中对齐，也就是center。 2、坐标轴的原点就是对应容器的左顶点。 3、这个坐标的y轴箭头朝下，也就是右下方（容器内部）x y的值才都为正。 4、x y值分别表示背景图片的左顶点相对于坐标原点（也就...
精灵图、定位
x111223的博客
10-08 833
css 精灵 英文叫法”css sprites“ 也成”精灵图、雪碧图“，通常被解释为”css图像拼合“或”css贴图定位“。其实就是把一些”背景图片“ 整合到一张图片文件中，在利用“背景定位”显示合适的图片。一般精灵图适合小背景，不适合大背景。
精灵图的使用-（坐标标识）
阿牛哥的博客
12-14 2655
精灵图主要针对小的背景图片来使用。 主要借助于背景图片的来实现-`background-position`。 学废了嘛，兄弟们
html精灵图坐标如何确定,CSS实现精灵图与字体图标
weixin_29956903的博客
05-31 599
精灵图：在以前，每个图片资源都是独立的一张张图片，浏览器访问网站中的不同网页时是重复获取这一张张图片的，这代表需要访问很多次资源。为了减少资源的访问次数，将多个常用的图片集合到一张图片中(网页的缓存机制是会略去本地已经有的资源，如果前一次获取到了这个资源，那么后面不会再访问了，直到缓存的资源失效了。【意思有点类似去游乐园，有些票能玩所有游戏，而有些票只能玩一个游戏，如果你拿着能玩所有游戏的票，那你...
html精灵图坐标如何确定,如何使用HTML中的精灵图
weixin_35843830的博客
05-31 1521
在我们进行网页布局的时候经常会遇到以下的情况一排或多排文字上/下/左/右会有对应的小图标或图片，比如下图，1.png如果一张图片一张图片的去引入，不仅费时费力，还费资源。那这个时候该如何去快速的去把它做出来呢这时候就可以用精灵图去做了，精灵图又叫雪碧图，至于它为什么这么叫呢，说实话我也不知道你特么这是在逗我.jpg好了言归正传，该怎么去做呢？首先我们需要去做一张精灵图，至于怎么做，你可以用ps呀，...
精灵表坐标查看器-canvas学习第三天
RisaSama的博客
05-10 436
先来看效果图 JavaScript的代码 var canvas = document.getElementById('canvas'), readout = document.getElementById('readout'), context = canvas.getContext('2d'), spritesheet = new Image(); //Functions //将鼠...
一个小案例让你学会使用CSS精灵图
weixin_44164982的博客
07-15 694
精灵图的使用------很多小问题我们稍微一看就懂，比如静态网页中精灵图的使用这个问题。这时候如果能动手敲一敲代码练习一下，这个知识点在我们的学习过程中，就从“懂”的状态变成“会”的状态了。
CSS高级技巧：精灵图、字体图标、布局技巧
最新发布
m0_73560798的博客
10-08 1514
字体图库的下载：推荐下载网站:●icomoon 宇库 http://icomoon.io（我下载的是这个）●阿里iconfont字库 http://www.iconfont.cn/
CSS精灵图(Sprite)笔记
Z_CH8648的博客
11-27 813
网站上有很多小图标，这些小图标如果使用单独的图片，会对服务器产生大量的连接请求，造成堵 塞；精灵图是把许多小图标整合成一张图片，减少连接请求，增加页面显示速度。
css精灵图坐标如何确定
06-09
CSS精灵图坐标的确定需要以下几个步骤： 1. 把所有需要合成的小图标拼在一起，形成一张大图，这个大图就是CSS精灵图。 2. 确定每个小图标在大图中的位置，也就是坐标值。可以使用Photoshop等图像处理软件来确定每个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值