控制精灵图大小和位置

问题：精灵图和精灵图中的小图片大小与开发需要的大小不一样，需要修改精灵图、或者修改精灵图中小图片的大小尺寸。但是在修改过程中会遇到精灵图大小和定位错乱的情况，如何解决？解决：精灵图中小图片的宽高缩放多少倍，精灵图的宽高就缩放多少倍，原始定位的X、Y轴 同样缩放相应倍数（宽度对应X轴、高度对应Y轴）精灵图原始大小：600px 600px
精灵图中小图片'A'的原始大小：100px 100px
精灵图中小图片'A'的原始定位：10px -200px我想让小图片'A'在页面中显示大小为：20px 50px
1、小图片'A'的原始大小与需求大小的宽、高比例分别缩小了：5倍、2倍
2、将精灵图的宽、高同样缩小：5倍、2倍 = 120px 300px
3、将小图片'A'的原始定位同样缩小：5倍、2倍 = 2px -100px所以，想让小图片'A'在页面中显示大小为：20px 50px 的CSS代码为：
background-position: 2px -100px;
background-size: 283.3285px 120px 300px;

控制精灵图大小和位置相关推荐

android 精灵图的使用方法,css sprites（精灵图）如何使用？
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
17-CSS3 高级技巧精灵图字体图标滑动门
CSS高级技巧 CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
前端知识点------小米官网精灵图书写（两种方式）
图片示例: 第一种:采用背景图片的方式 <!doctype html> <html lang="en"> <head><meta char ...
精灵图公共样式使用技巧
精灵技术产生的背景图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...
一个大图切成几个小图加载速度更快_CSS精灵图技术（提高页面的加载速度）
未来2088 2019-11-28 18:00:00 哈喽大家好,我是作者"未来",本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦! ...
html中精灵图的使用方法,css sprites（精灵图）如何使用？
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合，X轴的颜色，X轴字体颜色，调整柱子颜色，调整小图标图例的大小和位置,鼠标
本文已参与「新人创作礼」活动,一起开启掘金创作之路. 宝子们,今天又是开心的一天呢~ 上面先说注意事项 1.如果使用show hidden控制图表显示隐藏,某些切换效果很奇怪,比如饼图,会从左上角开始 ...
小兔鲜项目搭建-精灵图、背景图片大小、盒子阴影、过渡
1.1精灵图: 使用步骤: 1.创建一个盒子,设置盒子的尺寸和小图尺寸相同 2.将精灵图设置为盒子的背景图片 3.修改背景图位置精灵图的标签一般都用行内标签,如span,b,i: 背景图位置属性:b ...
精灵图 html为什么会变大,CSS Sprite精灵图如何缩放大小
在移动端项目当中,如果要使用精灵图的话,因为我做了px自动转换vw单位,所以在使用的时候,position位置正常写单位是px,但是转化成vw后就找不到对应的图片了 "postcss-px ...

控制精灵图大小和位置

控制精灵图大小和位置相关推荐

最新文章

热门文章