小猿圈web前端解析CSS怎么从图片中抠出一部分
2019-05-09 09:47
716 查看
对于学习前端的小伙伴来说css是不是一点都不陌生呢,从开始学习前端就接触的css你真的熟练了吗?今天小猿圈web前端讲师讲解怎么从CSS图片中抠出一部分(雪碧图)。
这里咱们会用到一个css属性:background-position。
按照字面理解,这个属性就是背景定位,下面咱们来具体操作一下:
咱们拿到一个图:
HTML结构是:
div{
background: url(‘bg.png’) no-repeat;
}
比如咱们现在想要哪个手机,通过ps测量到哪个手机到尺寸是,宽度(10px)、高度(16px),那么咱们调整一下css:
div{
background: url(‘bg.png’) no-repeat;
width:10px;
height: 16px;
}
运行结果:
手机这个小图混杂在大图中,想提取出来,需要用background-position属性,background-position它有两个参数,分别是水平方向移动的像素、竖直方向移动的像素,都用负数表示。
因此,只要找到小图相对于大图左上角顶点的水平移动像素、竖直移动像素就可以了。
经过测量以后的css调整为:
div{
background: url(‘bg.png’) no-repeat;
width:10px;
height: 16px;
background-position: -299px -243px;
}
以上就是小猿圈web前端老师针对雪碧图的简单介绍,对于你熟悉的css是否有了新的理解了呢,那还在等什么,快去行动呀,记得如果遇到了不懂问题可以到小猿圈寻找答案,里面有最新最全面的视频等着你去学习。
相关文章推荐
- web前端学习笔记---利用css+filter完成简单的图片透明效果
- 大型web网站前端css\js\图片版本管理解决方案
- web前端技术,jquery+css 查看源图片大小
- 关于web前端,css小技巧的笔记——图片动态比例显示
- 【Web前端笔记】css让背景图片拉伸填充的属性
- <web前端>当背景图片为渐变色图片时,为避免浏览器大小问题,可以选择使用<CSS>实现渐变色,教程如下
- [Web前端技术教学]CSS背景图片位置的百分比解释
- WEB前端底层知识之浏览器是如何工作的(4)--Render树与CSS解析
- WEB前端底层知识之浏览器是如何工作的(4)--Render树与CSS解析
- WEB前端底层知识之浏览器是如何工作的(4)--Render树与CSS解析
- WEB前端优化CSS,JS,图片
- web前端-CSS 图片廊 -026
- Web前端学习——JS基础二之图片切换
- web前端基础教学视频分享(一)html+css+js基础教学(附淘宝网站开发教程)
- web前端学习笔记(CSS盒子的定位)
- Brackets - (HTML/CSS/JavaScript 前端 WEB IDE) 使用技巧
- Web前端——CSS的基本类型
- 七个Web前端程序员必须会用css技巧
- web前端开发的点点滴滴---3.CSS介绍
- django后台上传的图片怎么在admin后台查看和前端显示,MEDIA_URL怎么用?