html精灵图坐标如何确定,如何使用HTML中的精灵图
在我们进行网页布局的时候经常会遇到以下的情况
一排或多排文字上/下/左/右会有对应的小图标或图片,比如下图,
1.png
如果一张图片一张图片的去引入,不仅费时费力,还费资源。
那这个时候该如何去快速的去把它做出来呢
这时候就可以用精灵图去做了,精灵图又叫雪碧图,至于它为什么这么叫呢,说实话我也不知道
你特么这是在逗我.jpg
好了言归正传,该怎么去做呢?
首先我们需要去做一张精灵图,至于怎么做,你可以用ps呀,美图秀秀呀,LOL呀,CF呀等等的平面设计软件去制作
3.jpg
下面是我已经做好的一张精灵图
spire.jpg
然后就用i标签(其他的标签也行)来引入精灵图
- 微型
- 小型
- 紧凑型
- 中型
- 中大型
- 豪华
- MPV
- SUV
- 跑车
- 新能源
然后在less中写出样式
ul {
font-size: 14px;
line-height: 68px;
cursor: pointer;
li {
.f-l;
&:hover {
color: #4881d4;
}
i {
.whb(50px, 35px, none);
display: inline-block;
background-image: url("../images/spire.jpg");
background-size: cover;
background-position: 0px 0px;
vertical-align: middle;
}
其中 background-image:是引入你做好的精灵图,找到相应路径,把图片引进来就行
background-image: url("../images/spire.jpg");
background-size: 是图片尺寸的意思,也就是调节图片大小,一般都会把它的属性设为 cover
background-size: cover;
background-position:是背景图片定位,就是把图片定到你想要的位置,后面跟单位像素值来调节,第一个代表x轴方向(水平方向),第二个代表y轴方向(垂直方向)
background-position: 0px 0px;
剩下就是调整background-position的数值了,需要分别把每个li元素下面的i标签都重新调整一下,因为每个图的宽度都不一样,要顾及到整个盒子的宽度问题,要能放的下这些图,所以每个i标签的宽度也需要重新调整一下
ul {
font-size: 14px;
line-height: 68px;
cursor: pointer;
li {
.f-l;
&:hover {
color: #4881d4;
}
i {
.whb(50px, 35px, none);
display: inline-block;
background-image: url("../images/spire.jpg");
background-size: cover;
background-position: 0px 0px;
vertical-align: middle;
}
&:nth-of-type(2) i {
.whb(80px, 35px, none);
background-position: -106px 0px;
}
&:nth-of-type(3) i {
.whb(90px, 35px, none);
background-position: -236px 0px;
}
&:nth-of-type(4) i {
.whb(100px, 35px, none);
background-position: -392px 0px;
}
&:nth-of-type(5) i {
.whb(109px, 35px, none);
background-position: -538px 0px;
}
&:nth-of-type(6) i {
.whb(105px, 35px, none);
background-position: -710px 0px;
}
&:nth-of-type(7) i {
.whb(87px, 35px, none);
background-position: -860px 0px;
}
&:nth-of-type(8) i {
.whb(87px, 35px, none);
background-position: -993px 0px;
}
&:nth-of-type(9) i {
.whb(107px, 35px, none);
background-position: -1123px 0px;
}
&:nth-of-type(10) i {
.whb(80px, 35px, none);
background-position: -1275px 0px;
}
}
}
这样的话可以算是做好了,看下做好的效果是什么样子
2.png
如果由背景重复的问题可以加一个属性
background-repeat:no-repeat;//它是设置背景不重复平铺,//
//如果需要重复就把repeat前面的no去掉,repeat是重复的意思//
怎么样,是不是效果还不错,如果觉得还行的话就点个赞呗!!!
本人学识有限 文章多有不足
若有错误 请大方指出 以免误导他人 谢谢!!!
html精灵图坐标如何确定,如何使用HTML中的精灵图相关推荐
- CSS 精灵图的使用;精灵图不见了;如果一次性设置多个精灵图
1. 先来一波排错: 为什么精灵图无法显示? 容器太小,图片显示不全 容器是行内元素,没有内容,宽高没有撑开.可以转化为块级/行内块,设置宽高 背景图片的url地址写错 检查背景图片绝对引用/相对引用 ...
- html精灵图坐标如何确定,CSS实现精灵图与字体图标
精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了减少资源的访问次数,将多个常用的图片集合到一张图片中(网页的缓 ...
- html精灵图坐标如何确定,背景设置及精灵图
背景色.box{ width:450px; height:450px; border:1pxsolid aqua; background-color:burlywood; /* 背景色默认可以从内边距 ...
- JS循环精灵图背景-遍历背景图片
利用for循环设置一组元素的精灵图背景 如果用css做,需要每个小盒子都设置一遍,才能得到相应的图标 分析: 1.首先精灵图图片排列是有规律的 2.核心:利用for循环,修改背景位置 精灵图来源:卷皮 ...
- 一个大图切成几个小图加载速度更快_CSS精灵图技术(提高页面的加载速度)
未来2088 2019-11-28 18:00:00 哈喽大家好,我是作者"未来",本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦! ...
- 精灵图公共样式使用技巧
精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...
- 17-CSS3 高级技巧 精灵图 字体图标 滑动门
CSS高级技巧 CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
- 二倍图(精灵图的用法)
1.引入图片.在fireworks中限制宽高,然后把宽高设置成现在的一半 2,采用切片工具进行切片,获取精灵图的坐标 转载于:https://www.cnblogs.com/qdxbls/p/1105 ...
- CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
最新文章
- C++对象的内存布局1---基础篇----C++ 虚函数表解析
- win32 wmi编程获取系统信息
- 简单的MYSQL数据库
- redis系列3---理解内存
- 启发式算法在最优化问题求解中的应用与实践
- 7-10 任务调度的合理性 (8 分)
- Ruby数据结构-数组和哈希表
- Linux系统下载Unity-Tweek-Tool
- FCM算法的matlab实现(Fuzzy C-means 算法)
- ECharts南丁格尔图
- DDOS攻击是什么意思?服务器怎么防DDOS攻击?
- 微信小程序-抖音/字节小程序
- Java培训要多久以后才能工作?
- 算法笔记(胡凡)学习笔记@Kaysen
- 搭建无广告免费小说网站------简述(一)
- 固态硬盘中的数据该怎么恢复
- LeetCode刷题(python版)——Topic30串联所有单词的子串
- css布局 --- 流体布局 冻结布局 凝胶布局 绝对定位
- 实现HTML页面在手机浏览器上全屏的方式
- 微信小程序的场景值scene