问题背景

在精灵图的原图中，这个标志只有11px11px，但我想放大成33px33px

讲解

修改前

// An highlighted block<div class="bg"><a href="#" class="left"></a><a href="#" class="right"></a></div>

// An highlighted block.left {display: block;width: 11px;height: 11px;position: absolute;background: url("images/sprites3.png") no-repeat;background-position: 0 -85px;background-size: 152px 144px;top: 50%;}

这里我们看到左a标签太小，需要缩放。
思路：
1.缩放a的width，height
2.将background-size，缩放相应的倍数
3.background-position，也放大三倍

修改后

// An highlighted block.left {display: block;width: 33px;height: 33px;position: absolute;background: url("images/sprites3.png") no-repeat;background-position: 0 -255px;//原本 0 -85pxbackground-size: 462px 432px;//原图152*144,在这里放大三倍top: 50%;}

定位+精灵图时，精灵图缩放用法相关推荐

精灵图，背景图缩放。盒子阴影，
文章目录精灵图背景图大小连写盒子阴影过渡骨架标签 SEO三大标签标题图标--favicon 精灵图将小图合成一个大图优点:减少服务器的发送次数,减轻服务器的压力,提高页面的加载速度 ...
CSS学习笔记七---定位精灵图
一:知识点 1:定位属性用法总结 2:绝对定位---参照物是浏览器的第一屏 a:没有父盒子,或者父盒子没有定位相对于浏览器左上角位置来定位 b:父盒子有定位相对于父盒子来定位,子绝父相以下为注: ...
二倍图（精灵图的用法）
1.引入图片.在fireworks中限制宽高,然后把宽高设置成现在的一半 2,采用切片工具进行切片,获取精灵图的坐标转载于:https://www.cnblogs.com/qdxbls/p/1105 ...
精灵图与字体图标的区别和用法（附Icomoon字体图标的使用方法）
CSS苦逼学习日记(6) 精灵图 1.精灵图是什么?: 把许多小图标都放在一个大图片上,这样利用小图标的时候只需要重复使用多次利用同一张大图片,减少加载各种图片路径的时间,减小程序(网页)的运行速率, ...
android 精灵图的使用方法,css sprites（精灵图）如何使用？
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
web前端入门学习 css（7）css高级技巧（精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录精灵图为什么需要精灵图? 精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
CSS精灵图代码示例
什么是css Sprite 当用户访问一个网站时,浏览器会向服务器发送一系列请求,比如说网页上的每张图像都需要经过一次请求才能最终展示给用户.然而,一个网页中往往包含大量的图像资源(例如在页面中展示的 ...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（精灵图，字体图标，技巧）
一.基础班学习路线三.CSS高级技巧 1.精灵图为什么需要精灵图sprites 精灵图使用(原理) 精灵图使用(代码) 精灵图案例-拼出自己名字 2.字体图标字体图标产生和优点字体图标下载字 ...
拉勾网主页面HTML+CSS布局代码，附结果图精灵图
commen.css+reset.css代码链接:链接: link. style.css代码链接:链接: link. 精灵图: 结果图:(相同的内容用同一段代码替换) HTML内容,文件名:index ...

定位+精灵图时，精灵图缩放用法

定位+精灵图时，精灵图缩放用法

问题背景

讲解

修改前

修改后

定位+精灵图时，精灵图缩放用法相关推荐

最新文章

热门文章