首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

什么叫 “雪碧”?

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

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

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

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

    1.6K100

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

    postcss-lazysprite 是一个基于PostCSS 开发的用于生成雪碧图片及其CSS 的插件,经过半年持续迭代,现已稳定用在旗下两款产品的Web 业务中。...其与市面上的雪碧插件不同在于生成雪碧的“懒惰”姿势。 前言 前端界,伴随着雪碧这个概念出现,自动化产生雪碧这类工具就层出不穷。...本文介绍的postcss-lazysprite,在于解决的场景是:我想在开发阶段就生成雪碧并用上其CSS,同时我又想很方便地产生,用起来越简单越好。...的路径相关; stylesheetRelative:为了在生成的CSS 中构造相对路径而引入,一般与gulp.dest的路径相关; spritePath:生成雪碧放置的目录; smartUpdate...如本文开头所言,postcss-lazysprite 目标是开发阶段就能用上雪碧,所以缓存机制很重要,总不能在开发阶段每保存一次 CSS 就重新走一遍“遍历所有图片并生成雪碧”的流程。

    1.7K90

    在线配置生成动态排序柱状工具上线

    为什么会有这个工具 前阵子笔者在交流群分享上线的地图在线编辑工具, 得到了一个老哥的赞美。 然后他说,之前用的别的工具网站非常卡,又发给我一个做的动态排序的视频。...于是,我的点子来了,咱就是说,要做一个更流畅的动态排序柱状在线生成工具,这不,他来了。 网站地址在文末,不想看操作说明可以直接跳过。...如何生成动态排序柱状 首先,作图步骤分为两步,对应两个 Tab。 编辑数据 第一步,编辑数据 Tab。...编辑动态排序 编辑好数据和图标后,我们可以点击第二个 Tab。 在这个 Tab 可以编辑图表的标题、副标题、y 坐标名称等,也可以设置每一帧的间隔时间。

    73440

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

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

    2.4K30

    Flowpoints:根据流程自动生成网络模型代码的在线工具

    今天给大家推荐一款在线网络结构搭建软件,只需要画好网络流程即可自动生成网络结构代码。 Flowpoints Flowpoints是一个开源的在线工具,用户可以用流程的方式构建深度学习模型。...通过定义神经网络中的各个节点及其节点参数,就可以快速生成深度学习模型的Python代码。网页中提供相应的代码预览工作,你只需单击复制即可将代码复制到你需要的地方,同时可以创建模型的共享链接!...在这里,您将更改此流程的操作。 首先删除此字段中的所有文本,然后键入“Conv”就会出现一个类型列表,里面包括各种神经网络层类型,然后选择需要的网络层类型即可。...最后,生成代码 单击侧栏中的“代码”选项卡就可以显示当前模型的代码。 如下图所示: ?...到此为止,我们完成了所有步骤也得到了模型的代码结果,你可以按照这个步骤快速生成自己的网络模型而不需要查找百度自己编写代码。

    4.2K21

    人物关系、旭日、弦、树、矩形树在线配置生成工具一把子梭哈了

    这次把关系、弦、树、矩形树、旭日在线生成工具一把子更新了,操作流程和桑基图一致。...也是在左边侧边栏选择操作方式,右上方上传文件、编辑表格、修改标题,右下方有六个 Tab,第一个就是桑基,后面五个就是今天的主角。可以生成以下样式的图表。颜色都是随机生成的。...树 上面合成前两个图表都是树,只不过第一个是径向(radial)布局,时人多称之为径向树状。第二个是正交(orthogonal)树状。...关系 合成图表第四个图表就是关系,而且是环形(circular)布局的,可以切换到如下力导向(force)布局。...弦 合成图中第三个图表就是弦,这个就说一点,可以设置连线值的上下限,只有值介于上下限的连线才会被显示,合成图中的没有设置上限,如果设置上限为 10000,弦将变成以下样子。

    1.7K30

    ios打包证书在线生成在线制作方法

    那么有没有在线生成ios打包证书的方法呢?...下面是在线生成ios证书和证书profile文件的方法:1、进入苹果开发者中心:https://developer.apple.com,假如你还没有苹果开发者账号,则要先注册苹果开发者。...3、创建的过程中,它会要求我们上传一个csr文件:4、假如你没有mac电脑,生成CSR文件和导出P12文件,可以使用香蕉云编这个工具来生成,工具的地址如下:https://www.yunedit.com...6、回到香蕉云编控制台,上传你刚在苹果开发者中心下载的cer文件后,即可生成p12证书:生成成功后,创建证书的流程已经创建完毕!...下面,我将介绍生成profile文件的步骤,profile文件全程都在苹果开发者中心生成,下面是创建profile文件的步骤:1、点击identifiers菜单,这个功能是创建appId的意思,这个appId

    1.3K40

    在线平面设计教程

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

    3K30
    领券