首页
学习
活动
专区
工具
TVP
发布

什么叫 “雪碧”?

今天来随意聊聊雪碧雪碧是什么? 雪碧,英文原名叫 CSS sprites。 sprite 指的是精灵。 我们喝的雪碧,它的英文也是 sprite,应该直译为 “精灵” 的。...于是就走音译的路线,翻译成 “雪碧” 了。 所以雪碧更正确的叫法应该是 “精灵”。 那为什么叫精灵呢?...然后我们在使用的地方用 background-position 设置好位置: 雪碧的作用 雪碧的主要作用是减少 HTTP 请求数量。 假如你有 100 张小图片,你要发起 100 个请求。...如果我们将按钮的所有状态都放到雪碧了,就不会有这个问题了。当然还有一种方式就是通过 JS 手动做其他状态小图片的缓存。 结尾 雪碧其实和雪碧没关系,它和 sprite(精灵)有关系。

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

使用grunt对css中的background图片自动生成雪碧

今天想对这个现状进行改善,网上查到一种雪碧的方案,其实就是使用工具将数量很多的小图片拼成一张大图片,然后css里都引用这张大图片,并指定显示该图片的某一个区域,但这个方案需要手工作很多处理。...于是就想到能不能用目前比较成熟的grunt对前端样式文件自动进行处理,自动生成雪碧,自动修改样式文件。...grunt.initConfig({ // 自动雪碧 sprite: { options: { // 映射CSS中背景路径,支持函数和数组,默认为 null...,如果启用请注意清理之前生成的文件,默认不生成新文件 newsprite: false, // 给雪碧追加时间戳,默认不追加 spritestamp:.../images/', // 雪碧输出目录,注意,会覆盖之前文件!

1.6K100

一键制作自适应等比缩放的雪碧帧动画

雪碧并不陌生,将多张图片合在一起来减少请求数,从而提升网站的性能。在你的网站未支持 HTTP2 前,还是值得这么处理。...为了适应不同的设备分辨率,一般会做几套不同大小的去适配,那如何用一套来自适应缩放呢? 本文对等比缩放的雪碧动画的原理进行分步讲解,并使用 gka 进行一键生成。...4张,高含有5张,所以如果将雪碧宽度4倍放大(即每张图片宽度都4倍放大),此时元素在宽中将只能展示1张。...同理,雪碧的高放大5倍后,那么元素的展示就被一张图片填充满了。 ?...gka imageDir -t percent gka 最终输出自适应的雪碧帧动画套装:雪碧、css文件及预览文件。 ?

2.1K30

postcss-lazysprite: 一种生成CSS 雪碧的懒惰姿势

其与市面上的雪碧插件不同在于生成雪碧的“懒惰”姿势。 前言 前端界,伴随着雪碧这个概念出现,自动化产生雪碧这类工具就层出不穷。...根据输入方式的不同,现在市面上基于Node.js 的雪碧构建工具一般可分为如下两种(如有不实,望予以指出): 一种是现在国外常见的基于spritesmith 的各类通过构建工具注册任务进行合并产生雪碧的插件...如上面介绍的两种类型的插件,一种是将雪碧合成从常规的写CSS 行为中抽离出来,一种是后编译的雪碧合成,其使用场景各不相同。...(即单个小);dist则是编译后 CSS 及产生的雪碧图片及其CSS。.../dist/slice'定义的目录下的子目录,这个目录下的所有雪碧会合成为一张雪碧,图片名称默认是以filetype.png命名。

1.6K90

在线平面设计教程

在介绍平面之前先简单了解一下平面的概念 什么是平面 平面,又称则,是建筑物工程的组成部分。当测区面积不大,半径小于10公里(甚至25公里)时,可以用水平面代替水准面。...现在一些网站提供在线的平面设计工具,可以绘制各类相关的平面, 下面小编就为大家介绍一款在线平面绘制工具: Freedgo Design ,他可以轻松、快速、协作地创建各种专业图表。...是多种类型图表的在线绘制软件,让您快速创建家庭、办公、厨房、卫生间、卧室、餐厅等等平面。.... ---- 通过一系列的绘制完成平面设计,操作示例请看如下视频: 该平面查看效果如下: 在线平面设计 下面简单介绍一下该平面的功能: 这是一个住宅的平面,绘制了主建筑的墙、门窗结构、照明设备...平面包括: 门窗及墙面 安全设施 家具 照明设备:区分3种不同的颜色标识区分厨房,室内,室内等 水管及洁具: 标注了盥洗室,排水管道,梳妆台,冷水管道,温水管道等 该平面通过 在线制图工具

2.4K30

markdown 脑在线看!

非常高兴的告诉大家,xjjdog将常见的技术点,整理成了大量的脑。鉴于目前市面上的脑,都以xmind等形式去传输,给知识的传递和分享造成了很大的困扰。...所以,这次分享的脑系列,都是可以在线看的!使用markdown语法即可编写! 精准校对,大部分在xjjdog公众号有配套详解。 1....如何贡献 2.1 贡献脑 git地址: https://github.com/xjjdog/okmind/ 我们的脑,使用文本文件就可以打开。...因为它的格式,是MarkDown的,如果你想要分享新的脑。欢迎提交merge request。...提交内容包括: 一个markdown脑图文件,格式参考其他脑,提交在 md 目录 一张500x213的图片。提交在 cover 目录 一个准确的归类 提交被接收之后,你的脑将自动出现在网站上。

71920

leaflet在线地图之热力密度

之前在练习leaflet的时候没有找到R语言leaflet中的热力密度接口函数,一直感觉很遗憾。...如果你还想了解leafelt更为丰富的用法和特性,请参考以下这些分享,期待大家可以将这些在线地图丰富的可视化特性结合shiny容器打造出更具业务价值的数据分析看板和仪表盘,也期待同样喜欢可视化的小伙伴儿可以一起线上线下交流...动态地理信息可视化——leaflet在线地图简介 动态地理信息可视化——散点地图系列 动态地理信息可视化——leaflet构造路径 动态地理信息可视化——leaflet填充地图 Leaflet在线地图进阶宝典...——json素材操纵与图层面板控制 leaflet在线地图进阶宝典之——高级辅助特性 leaflet在线地图进阶宝典——高级交互特性 leaflet的小搭档leaflet.minicharts来了,从此动态地图又多了一些乐趣

2K20

几款在线制作工具

,于是在傍晚下班时分,注册了几个在线的脑工具与,是在线就可以使用的,不需要下载这么麻烦。...画出自己的任务 1:凹脑:https://aonaotu.com/ 介绍:凹脑---一款简单又好用的在线思维导,具备 MindNode Pro 所有的功能特点,支持多种方式导出,凹脑还具备云端存储功能...2:百度脑:http://naotu.baidu.com/ 介绍:介绍百度脑是由百度公司开发的一款在线思维导编辑器,百度用户可以直接通过百度脑网页版本,界面还是相对比较好看的,百度家产品,向来风格简约大方...支持在线创作流程、思维导、BPMN、UML、UI界面原型设计、iOS界面原型设计等。您可以把作品分享给团队成员或好友,无论何时何地大家都可以对作品进行编辑、阅读和评论。 ?...4:https://zhimap.com/ 介绍:zhimap整理知识 分享导 - 极简 清爽 手感佳 所见所得 快速分享。让您在线上直接创建、保存并分享你的思路。 ?

7.5K60

通过在线平面网站设计漂亮的平面

现在一些网站提供在线的平面设计工具,可以绘制各类相关的平面, 下面小编就为大家介绍一款在线平面绘制工具: Freedgo Design ,他可以轻松、快速、协作地创建各种专业图表。...[在线制图 平面设计] 平面包括: 门窗及墙面 安全设施 家具 照明设备:区分3种不同的颜色标识区分厨房,室内,室内等 [在线制图 平面设计] 水管及洁具: 标注了盥洗室,排水管道,梳妆台,冷水管道...,温水管道等 [在线制图 平面设计] 该平面通过 在线制图工具 Freedgo DesignFreedgo Design设计,具体地址为: 平面的制作步骤 步骤一: 访问 https://www.freedgo.com...进入制图页面后 点击 文件 -> 从类型中新建 -> 平面 选择其中一个平面 [在线制图 平面] 或者点击图例,在图例中找到 平面,选择一个类似的图例进行改动 [在线制图 平面] 步骤三: 从左侧符号栏拖拽合适的几何图形至画布...[在线制图 平面] 更多基本流程的例子 请参考 图例 或者直接访问 : 搜索文件-在线免费绘图工具,在线er模型设计,云架构图设计,思维导,在线UML设计,在线建筑平面|裕奥在线绘图工具Freedgo

8.2K20

用例介绍:在线制图UML用例(use case)

用例 用例描述了用户如何使用系统来实现特定的目标。用例由系统、相关的用例和参与者组成,并且将它们相互联系起来....[用例] 用例图例子 以下图例皆使用了在线UML制图网站Freedgo Design,其访问地址为: https://www.freedgo.com freedgo Design 是一个多种类型图表的在线绘制软件...,让您创建 阿里云架构图 腾讯云架构图 Oracle云架构图 AWS系统部署 软件架构图, UML,BPMN,ERD,流程,UX设计,ANT DESIGN,思维导,图表。...具体参考 在线制图网站关于UML设计图例: http://www.feedgo.com/showcase.html **** 备注**: 点击 [https://www.freedgo.com/public.../zh-cn/site/**](https://www.freedgo.com/public/zh-cn/site/) 进一步了解关于在线制图的 更多功能。

3.8K00

流程在线绘制,快速、便捷、高效!

不会吧不会吧,不会不知道 Process On 在线绘制各种流程吧!!! 在线绘制网址:点我进入 注册账号 ?...新建,包含 新建文件夹 导入 流程 思维导 原型 UML 网络拓扑 组织结构图 BPMN ,这几个选项,对应选择即可。这里我们选择流程来演示。 ? ?...绘制一个简单的流程,很快就画完了,尤其是画箭头的时候。 ? 箭头可以改变线型,直线、折线和曲线 ? 修改箭头种类 ? 填充颜色 ? 导出文件,PDF比较清晰,选择 导出高清PDF文件 ?...连接箭头很方便,相信用过 Word 和 PPT 画过流程的同学深有体会。 在线绘制,快速、便捷、高效! 看了这么多赶紧动手试试吧!!! ? ?   本次的分享就到这里 ---- ?

60310

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券