学习
实践
活动
专区
工具
TVP
写文章

html精灵跟img标签,css精灵怎么使用?

什么是css精灵(sprite)?css精灵怎么使用?下面本篇文章就来给大家介绍一下css精灵的使用。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 在了解精灵怎么使用前,我们要先知道什么是精灵。只有先知道什么是精灵,了解精灵的原理了,我们才可是说使用精灵。 什么是css精灵(sprite)? css精灵(sprite)直译为“CSS精灵”,也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧”,是一种网页图片应用处理方式。 实例 精灵图表: 代码示例: html代码: Firefox Chrome Explorer Opera Safari css代码:ul.menu { list-style-type: none; 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/138980.html原文链接:https://javaforall.cn

24830
  • 广告
    关闭

    热门业务场景教学

    个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程,多款云服务器20元起。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    精灵

    什么是精灵? 就是将几张较小的图片放在一张大图上 为什么要有精灵? 最早的时候网速十分有限,为了提升用户体验,我们会将一张大分解成多张小来提高页面打开速度,但是网速得到了提升,为了能够让服务器承载更多的请求,我们要减少浏览器对服务器的请求,最直接的方式,就是将多张较小的图片放在一张大图上 而将多张小放到一张大图上的操作就叫做精灵,也可以叫做雪碧技术 也叫做css sprite 精灵的使用 一张大的图片上有很多小的图片,那么如何将这个小的图片拿出来呢? 比如:我们要html页面上放一个div,宽高为图片的搜索按钮的宽高 3.将精灵设置为容器的背景图片,并且根据图片所在的位置将背景图片进行平移 制作精灵 1.精灵必须是一些小的图片 2.精灵的多个小之间一定要留有足够的间隙 3.精灵的大小一定要大于所有图片中最大的那个 4.完成精灵以后一定要在精灵图下方留有足够的空隙,方便将来再次添加其它的精灵 5.如果是页面上一个像素的背景图片不要放在精灵图上面 Iconfont

    68210

    关于精灵

    之前就发现一些网站把所有的小图标拼接在一张图片中,但是一直不知道这是怎么做到的,今天特地了解了一下,才知道这种用法叫做精灵。 具体步骤: 1,创建合适大小的容器 2,将拼接的大作为容器的背景,并设置为no-repeat 3,改变背景的位置 对于改变背景的位置我们需要知道小图标在大图片的的坐标(以大的左上角为原点),例如如果小图标在大图中的坐标是 (10,20),那么将背景图片向左移动10px,向上移动20px就可以抵消小图标在大的位置。 获取这个坐标可以用PS中的切片工具,将小图标选择出来后右击选择编辑即可看到小图标的坐标 完整源码如下: <html> <head> <style> *{ 图标5

  • 图标6
  • </body> </html

    9020

    CSS精灵(sprite)

    说到精灵(雪碧),大家肯定和我一样觉得这个很新鲜。在学习了有关精灵(雪碧)的一些知识后,就来和大家讨论一下,我个人对精灵(雪碧)的一些理解和实现方法吧。 1、精灵技术产生的目的:很多大型网页在首次加载的时候都需要加载很多的小图片,而考虑到在同一时间,服务器拥堵的情况下,为了解决这一问题,采用了精灵这一技术来缓解加载时间过长从而影响用户体验的这个问题。 2、精灵技术的本质:所谓精灵就是把很多的小图片合并到一张较大的图片里,所以在首次加载页面的时候,就不用加载过多的小图片,只需要加载出来将小图片合并起来的那一张大图片也就是精灵即可,这样在一定程度上减少了页面的加载速度 例如这是一张大的精灵,我们现在用它来拼出我们想要的字母,例如ANDY <! > 最终效果: 其实说白了就是将精灵设为一个大背景,然后通过background-position来移动背景,从而显示出我们想要显示出来的部分。

    14010

    js循环精灵

    js循环精灵 循环精灵可以不用在给每一个小块一 一的修改位置。 主要原理是找到整张的背景与li的下标的数学关系 左侧是一大张背景 右侧是成品是预览 这个背景的位置其实是有规律的,每两张之间间隔一个固定长度 为20px,小图标的长度为24px,我们就可以得出这个间隔 然后使用这个间隔移动这个大背景的位置达到精灵的效果。我们的每一个span中都会有一个 background-image 因此我们只需要关注 大背景的纵坐标上的移动。 <! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul > 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/142018.html原文链接:https://javaforall.cn

    13520

    CSS Sprites(精灵

    (指定不重复), background-position(确定小精灵图中的位置,必须精确定位) 接下来看一下一些大型网页是否使用了精灵 如淘宝页面 通过审查元素,查看右边小图标是否使用了精灵 在观察html代码,发现他还有一个tbh-icon的类,通过Style我们可以看到tbh-icon引入了一张背景图片,打开背景图片链接 如下,一张图片包含了很多个小背景,这便是【精灵】 很多大型网页都使用了这种技术 将鼠标置于选取图片的左上角 如图得到图片的大小及位置信息 在html文件中 ```php <! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css" > 效果 制作精灵 制作精灵就是将小图标放图一个大的背景中即可,这里就不一一阐述,精灵制作遵循一下原则 1.精灵必须为透明背景 2.精灵图中个各个小应该有一定的间距 3.精灵底部应该预留位置方便以后添加

    11420

    compass 制作精灵

    -spacing:5px; $Icon-sprite-dimensions:true; //每个精灵生成对应的类设置了宽度高度,数值等于精灵的宽度高度; $Icon-repeat:no-repeat Icon-sprite-height(图标的名字)/Icon-sprite-width(图标的名字) //给一个特殊的精灵设置尺寸,就是读取精灵的大小;width: $icons-sprite-base-class @import “Icon/*.png”; //告诉compass更具Icon文件夹下面的png图片生成精灵; @include all-Icon-sprites;调用混合器生成每个精灵的样式 ,如果要个别生成可以这样写,@include 装图标的文件夹名-sprite(小图标的名称); 还有很多的compass提供的精灵辅助器我就不一一列举,上面的是比较常用的, 注意:所有的配置都是要在引入精灵之前配置 ,否则无效或者报错; 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/135681.html原文链接:https://javaforall.cn

    13910

    PS制作CSS精灵

    精灵简介 1.精灵(雪碧) (1)问题:精灵就是将很多的小图标合并到一张较大的图片中,那精灵是啥意思呢?(为此笑了一下午的我) 。 (2)精灵也称雪碧,由于大型网页首次加载需要时间,如果再加之加载小图标的时间,则会严重影响到用户体验。所以,考虑到在同一时间内,服务器拥堵的情况,使用精灵来解决这一问题。 那么怎么制作精灵呢 2.使用ps制作精灵的详细步骤 示例:将如下图图片中的四个图标合并为一张精灵。 根据下图将其他图标拖入上图中指定位置(以mobile1.png为例) 拖动完成效果 将其他小图标也拖入,如下完成 (5)导出:文件–导出–存储为web所用格式(选择png-24格式) 至此精灵的制作步骤已经完成 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/134040.html原文链接:https://javaforall.cn

    24710

    纯CSS实现“精灵”动态特效

    一、什么是精灵? 什么的是精灵呢?首先我们来看了一下京东官网的一个例子: 鼠标移入之前这个“相机”的是白色的,移入之后变为了红色: 这就是一个精灵的案例。 素材只需要一张图片: 只要我们改变图片的位置,就可以实现“精灵”。下面我们来利用CSS进行实现。 1、插入背景图片 在浏览器中的显示效果为: 2、进行定位 在浏览器中的显示效果为: 3、改变大小实现截取 在浏览器中的显示效果为: 4、利用背景定位 “切换”图片 在浏览器中的显示效果为: 5、实现“精灵”动态切换 利用获取焦点时改变样式的属性hover实现“切换”: 这样我们就最终实现了“精灵”的CSS动态特效 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/135234.html原文链接:https://javaforall.cn

    17330

    背景图片的精灵的使用

    DOCTYPE html > < html > < head > < meta charset= “utf-8” /> < meta http-equiv= “ X-UA-Compatible” content= “IE=edge” > < title >背景图片的精灵的使用 </ title > < meta name= “viewport – 精灵使用(重点) ☞浏览器中的坐标系 圆点以右为正方向,圆点以下为正。 ☞CSS精灵是一种处理网页背景图像的方式。 精灵也是一种背景图片 ☞精灵的使用 ◆使用fw一定要用打开的方式打开精灵 ◆使用精灵作为背景图片的时候,常与background-position配合使用 ◆测量精灵图中的元素的坐标使用矩形选择器 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/132972.html原文链接:https://javaforall.cn

    10820

    关注

    腾讯云开发者公众号
    10元无门槛代金券
    洞察腾讯核心技术
    剖析业界实践案例
    腾讯云开发者公众号二维码

    相关产品

    • 图数据库 KonisGraph

      图数据库 KonisGraph

      图数据库KonisGraph(TencentDB for KonisGraph)是基于腾讯在社交网络、支付、游戏和音乐等业务场景超大规模图数据管理的经验积累,为您提供的一站式高性能海量图数据存储、管理、实时查询、计算和可视化分析的数据库服务。支持属性图模型和TinkerPop Gremlin查询语言,帮助用户快速完成对图数据的建模、查询和分析;支持百亿级节点、万亿级边的超大规模图数据中关联关系的查询分析。广泛适用于社交网络、金融支付、安全风控、知识图谱、广告推荐和设备拓扑网络等具有海量关系数据的场景。

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券