CSS 图片偏移技术以及坐标问题

CSS中通过图片偏移技术可以实现将众多小图标放入一个图片中 ,网页加载时只需要加载一个图片即可实现得到众多小图标的功能。这是前端设计时候对图片的一种优化方式。

图片偏移技术只是一个属性而已，即:background-position: -100px -50px; 这个属性的第一个属性值是x轴的偏移量,第二个属性值是Y轴的偏移量

通过下面我自己编辑的一副图片来具体了解一下图片偏移技术的取值问题。

将主图看成是一个坐标系,原点是左上角，坐标系的X轴正向是向右，Y轴的正向是向下,background-position中的值是通过移动图片来得到值得。

CSS 图片偏移技术以及坐标问题相关推荐

CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...
css中图片整合的使用,CSS Sprites:图片整合技术详细案例
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度.介绍了CSS Sprites技术的实现方法,优点和缺点.最后通过实例CSS Sprites技术制作导航栏演 ...
CSS快速学习8：圆角切图、滚动条和图片整合技术
圆角切图 1.css 书写 border-radius:左上角右上角右下角左下角 border-radius:左上角右下角右上角左下角(对角线) border-top- ...
css基础：样式之定位、样式之隐藏、二级菜单、多个列表转表格、图片精灵技术
<html lang="en"> <head> <meta charset="UTF-8"> <tit ...
css基础：样式之定位、样式之隐藏、二级菜单、多个列表转表格、图片精灵技术...
<html lang="en"> <head> <meta charset="UTF-8"> <tit ...
css sprites精灵图、css图片整合、css贴图定位案例教程
一. 什么是css sprites CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图.就是将导航的背景图,按钮的背景图等有规则的合并成一 ...
CSS Sprites(CSS图片精灵、雪碧图)看这里就够了
CSS Sprites是什么 CSS Sprites是一种网页图片应用处理方式. 又被解释为: CSS精灵 CSS图像拼合 CSS贴图定位 CSS图片精灵 CSS雪碧图图片合成技术 CSS Spri ...
天地图叠加海图（图片偏移问题）Vue3 ol proj4
依赖 npm install olnpm i proj4 <template><div style="height: 100%;width: 100%;"> ...
[css] css图片缩放失真出现锯齿的如何解决呢？
[css] css图片缩放失真出现锯齿的如何解决呢? 1.-ms-interpolation-mode,这是针对IE的解决方案.其值设置为bicubic. 2.image-rendering,这是提供 ...

CSS 图片偏移技术以及坐标问题

CSS 图片偏移技术以及坐标问题相关推荐

最新文章

热门文章