雪碧图

css之雪碧图（精灵图）

听到雪碧图是不是跟我一样，啥？雪碧图？不知所以。如果一张大图由许多小图构成，那么每张小图都需要进行网络请求，这样一来就会有很多请求，为了减少网络请求，雪碧图就出现了。

星月心城·2024-09-10 11:34

css雪碧图实例

作业：雪碧图也就是一整张图片利用css样式里的background-position去调整位置，设置hover或是active显示出鼠标经过和点击的特效。

邵毅超·2024-09-07 11:37

其他面试题

面试题一、生命周期应用生命周期、页面生命周期、组件生命周期二、条件编译在工具中，打if出现的条件编译例如：这是h5端性能优化面试题一、加载优化1.http请求能不能减少（能不能合并）2.图片的雪碧图

奈何我是个菜鸡·2024-09-05 01:43

Vue3+vite搭建基础架构（9）--- 使用vite-plugin-svg-icons

---使用vite-plugin-svg-icons说明安装vite-plugin-svg-icons使用vite-plugin-svg-icons添加svg-icon组件和全局组件js文件测试svg雪碧图说明这里记录下自己在

谁不想飞舞青春·2024-02-20 19:26

面试题之项目做过哪些性能优化可以从哪方面说？

常见的性能优化措施：1.减少HTTP请求数：合并和压缩CSS、JavaScript⽂件，使⽤雪碧图、字体图标等减少图片请求，减少不必要的资源请求。

STATICHIT静砸·2024-02-20 18:42

html从零开始8：css3新特性、动画、媒体查询、雪碧图、字体图标【搬代码】

css3新特性div{width:200px;height:200px;background-color:aqua;position:relative;border-radius:20px;/*圆角属性，100%就变成圆形了*/left:50px;top:100px;}两个值border-radius:50px5px;阴影div{width:200px;height:200px;backgroun

搬代码·2024-02-20 00:47

svg之全局组件，配合雪碧图解决vue2的svg优化问题

这里是vue2中的svg的完整解决方案的另一篇。exportdefault{name:'icon',props:{name:{type:String,required:true,},},}这里这个就是全局的svg组件，代码来自于webpack-懒人神器：svg-sprite-loader实现自己的Icon组件-好好写代码吧-SegmentFault思否老师的代码则是写成这样的形式。其实和上面一个意

强啊啊强·2024-02-19 19:48

[前端开发] CSS基础知识 [下]

上篇:CSS基础知识[上]CSS基础知识[下]CSS新特性媒体查询雪碧图字体图标CSS新特性圆角(border-radius)通过border-radius属性为元素添加圆角。

YuanDaima2048·2024-02-19 10:46

2018.10.23背景，位置偏移和雪碧图

背景插入背景图片background-image:url(img/图片)背景颜色不会超过背景图片设置是否如何重复背景图片background-repeat:no-repeat只显示一个图片background-repeat:repeat-x水平方向铺满background-repeat:repeat-y垂直方向铺满给整个页面设背景，给body设置位置偏移与定位background-position

爽爽ing·2024-02-14 00:19

icon的几种做法

在csssprites（雪碧图）中应用，直接使用生成器就可以～ico

索伯列夫·2024-02-13 05:21

css 如何使用精灵图？background属性介绍（代码实例）

background属性介绍（代码实例），让大家可以了解css精灵图（雪碧图）是怎样使用的。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、css如何使用精灵图?

PHP9年架构师·2024-02-10 17:10

如何制作精灵图

css精灵图（sprite）直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”，是一种网页图片应用处理方式。

efb44152b9c8·2024-02-07 15:39

Web课程学习笔记--CSS-Sprite的应用

雪碧图CSSSprite的应用CSS雪碧，即CSSSprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分

北航程序员小C·2024-02-06 07:27

css亚马逊雪碧图

设置背景图片默认显示左上角，如果我们想显示图片中某个部分，可以采取负值把需要的部分移动到左上角。最终效果图：image.png鼠标滑过的效果：image.pngHTML：Documentcss:*{margin:0;padding:0;}.a{width:130px;height:45px;background-image:url(../img/amazon-sprite.png);}.b{wid

牛耀·2024-02-04 12:18

亚马逊

代码雪碧图.box1{width:129px;height:48px;background-image:url(image/am.png);}.box2{width:42px;height:30px;background-image

幸而0407·2024-02-04 02:36

【Web前端实操16】雪碧图（CSS精灵图）

雪碧图CSSSprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。

墨倾许·2024-01-29 09:51

Vue使用svg图片-svg-sprite-loader插件

svg雪碧图。类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。在vue2配合webpack；svg图片不存在id冲突，在使用时无需显示引入

禾苗种树·2024-01-27 06:28

记2018前端面试之旅

前端性能优化这个问题可以回答的比较多，我自己的答案：前端性能优化可以从：减少HTTP请求的数量减少HTTP请求的大小缓存内容分发网络脚本放置在底部，样式表放置在顶部...减少HTTP请求的数量：将公用的js、css文件合并CSS雪碧图图片地图内联图片不详细赘述了标题文字图片预加载方式

weixin_33896069·2024-01-26 10:27

CSS高级技巧导读

将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了1.2精灵图的使用使用精灵图核心：1，精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中2，这个大图片也称为sprites精灵图或者雪碧图

dmnyksl·2024-01-24 15:54

亚马逊

雪碧图.btn:link{display:block;width:47px;height:40px;background-image:url(amazon-sprite_.png);background-repeat

BaiBao丶·2024-01-21 06:00

使用阿里字体图标 iconfont 无法改变颜色问题

字体图标如今在项目中是普遍使用的一种方案，相比较以前的雪碧图方案来说，方便了不少。

独爱那杯cc·2024-01-17 15:27

07day-背景雪碧图

opacity属性在IE8及以下的浏览器中不支持IE8及以下的浏览器需要使用如下属性代替alpha(opacity=透明度)透明度，需要一个0-100之间的值0表示完全透明100表示完全不透明50半透明这种方式支持IE6，但是这种效果在IETester中无法测试如果定位元素的层级是一样，则下边的元素会盖住上边的通过z-index属性可以用来设置元素的层级可以为z-index指定一个正整数作为值，该

crx彭彭·2024-01-17 07:23

雪碧图

html文件：9-11css文件：.amazon{width:128px;height:47px;background-image:url(../img/amazon.png);/*background-repeat:no-repeat;/*background-color:gray;*/}a:link{display:block;width:42px;height:30px;background

coolkid_carryon·2024-01-13 12:43

亚马逊-雪碧图

雪碧图亚马逊雪碧图*{margin:0;padding:0;}.btn{display:block;width:125px;height:40px;background-image:url(亚马逊.png

蔚来天空·2024-01-13 10:50

vue解决打包后文件过大的问题-使用压缩插件打包后压缩文件-compression-webpack-plugin

前言：在用vue开发项目的时候，经常会面临一个文件，就是打包以后文件太大，首页加载时间长的问题，一般我们会从压缩文件，cdn引入文件，加载整合雪碧图等等的方式来优化，这里来谈谈压缩文件，主要使用的插件：

浩星·2024-01-13 06:14

VUE项目webpack打包使用compression-webpack-plugin压缩优化

2.减小前端打包后的文件体积降低前端打包后的文件体积这个方向，衍生出很多方法，比如图片压缩，雪碧图，优化代码，webpack的tree-shaking等。

Pa灬糯米·2024-01-13 06:38

scss，js使用——功能小记

这里主要记录一些容易忘的小技巧,持续更新~scss禁掉图片长按选择img{pointer-events:none;}雪碧图定位方法封装$list_style:("calss1","class2","class3

阳光小美女king·2024-01-12 13:05

项目优化的方法

)节流(throttle)防抖节流的区别：图片/视频/音频压缩减少请求发送次数减少重绘与回流经常要切换消失与出现状态的节点用v-show而不用v-if按需引入路由懒加载懒加载图片懒加载列表懒加载精灵/雪碧图

Code6E·2024-01-11 20:44

前端性能优化的方式

-空间换时间）从何入手：让加载更快，让渲染更快「让加载更快」1.减少资源体积：压缩代码：webpack配置mode:'production'图片压缩2.减少访问次数：合并代码：js文件css文件图片（雪碧图

loushumei·2024-01-11 02:40

js逆向第11例：猿人学第4题雪碧图、样式干扰

任务4：采集这5页的全部数字，计算加和并提交结果打开控制台查看请求地址https://match.yuanrenxue.cn/api/match/4，返回的是一段html网页代码复制出来格式化后，查看具体内容如下：

我是花臂不花·2024-01-07 07:28

ps如何测量选定区域的x,y轴住标精灵图

主要应用于精灵图片（雪碧图，由许多小图标组成的图片）,应用背景图片的应用。1、首先将精灵图导入ps。2、打开导航栏中的窗口选项，开启其中的信息选项。

流水彷徨·2024-01-04 22:52

基于nodejs的雪碧图制作工具

前颜（yan）雪碧图（CSSsprite），就是把很多小图标合并为一张图片。在Web开发中，使用雪碧图是优化Web性能的一种方法。

SimpleCXD·2023-12-30 18:33

面试题-性能优化

减少HTTP请求：减少页面元素的请求次数，可以使用雪碧图、字体图标、JS、CSS合并等优化方式，减小文件数量，提高页面加载速度。

苦逼的猿宝·2023-12-30 08:56

python爬虫二十六：css反爬及文字混淆

以及其它想要提取的数据②分析流程：他所有的内容均在网页源代码中，不用去寻找api接口，皆大欢喜，但它的价格是css加密过的，即点击styles中的不显示红框中的内容，它的价格就会发生变化，复制它的url地址，会发现是一张雪碧图

慢羊羊6379.*?·2023-12-25 23:54

如何使用HTML中的精灵图

那这个时候该如何去快速的去把它做出来呢这时候就可以用精灵图去做了，精灵图又叫雪碧图，至于它为什么这么叫呢，说实话我也不知道你特么这是在逗我.jpg好了言归正传，该怎么去做呢？

任建坤123·2023-12-22 22:57

2019-10-18购物车

雪碧图.bnt:link{display:block;width:43px;height:31px;background-image:url(image/3.png);background-repeat

王林1907·2023-12-20 01:58

亚马逊

雪碧图.btn:link{display:block;width:47px;height:40px;background-image:url(amazon-sprite_.png);background-repeat

蓝色海洋_bd2b·2023-12-19 20:19

完整的vite + ts + vue3项目，克隆就能用，傻瓜式保姆教程(第二篇)

本篇重点内容）1.1.1FetchAPI1.1.2XMLHttpRequest1.1.3axios（推荐）1.1.4EventSource1.1.5WebSocket1.2ts类型定义（本篇内容）1.3svg雪碧图

我有一棵树·2023-12-18 23:53

Less 知多少？

菜单中的雪碧图@iconWidth:14;//菜单导航icon.NavIcon(@n,@i:1)when(@i<=@n){&.nav-@{i}{background-position-y:unit(@iconWidth

Lik1024·2023-12-17 13:37

Web前端——背景、精灵图

1.背景2.精灵图（雪碧图）3.简写用backgroud一个代替所有/*当设置背景时有方向和大小时，书写：方向/大小*/

《独自往前》·2023-12-16 23:36

说说前端工程化利器 webpack

生成雪碧图（CSSSprite）。ES6转换为ES5语法。模块化。名称解析：Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。

deniro·2023-12-02 16:38

Pytorch中的torchvision.transforms笔记

pytorch中文文档中总结了pytorch的torchvision中的数据集、模型、变换和雪碧图（CSSsprites）制作四部分；链接如下：torchvision.utils-PyTorch中文文档

HSM_Python_LZT·2023-11-25 18:53

webpack学习（七）打包压缩图片

使用插件webpack-spritesmith生成雪碧图1、安装webpack-spritesmith；npminstall--save-devwebpack-spritesmith2.配置webpack.config.jsnewSpritesmithPlugin

weixin_30270561·2023-11-25 12:24

小程序基于雪碧图实现3d(横向全预览) ----组件

小程序、前端交流群：609690978先上效果图（gif图略有卡顿，实际很流畅）：准备条件：雪碧图，规格：单图尺寸343*375，帧数45帧（如图）上代码：wxmljsComponent({properties

The wind is blowing·2023-11-19 03:10

雪碧图的实际应用

雪碧图是将多个小图片合并成一张大图的技术，通常应用于前端开发中，优化页面加载速度，提升用户体验。以下是雪碧图的实际应用：图片合并：将多个小图片合并成一张雪碧图，减少http请求，加快页面加载速度。

&ACE&·2023-11-12 02:22

前端各种资源集合

文章目录前端资料集在线工具字体图标SVG|PNG|ICO素材压缩工具特效素材插画素材检查测试前端资料集在线工具CSS3贝塞尔曲线动画生成CSSGradient渐变色生成SVG在线制作工具一个轻量级在线编辑器在线生成雪碧图在线

失眠时间·2023-11-11 12:06

gulp和webpack区别

原文地址gulpgulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些

有意思的网民·2023-11-05 02:38

前端性能优化小结

1，减少页面加载时候得http请求首先项目中无用得图片或者视频音频资源应及时删除，页面中小图如导航小图标在线离线状态等可以整合成雪碧图。

念1_1你·2023-11-03 07:44

css精灵列表使用实例,介绍一个导出CSS精灵图动画的AE小脚本

序列帧就是一张张图片，快速连续播放就能成为动画，但是在H5里直接播放序列帧对网络性能不是很友好，有可能会造成卡顿或者丢帧，所以通常还会将其拼接成一张大图，即「精灵图」或者「雪碧图」(spriteimage

白诗诗·2023-10-31 22:40

原创：CSS3技术-雪碧图自适应缩放与精灵动画方案

花了一个礼拜完成了慕课网定制的七夕主题效果，其中有一个没实现好的功能，就是雪碧图的自适应缩放ps:以下实现都是基于移动端的处理原图如下：人物是采用的是雪碧图，通过坐标绝对数据取值问题很明显，在缩放的屏幕上人物还是按照原尺寸大小显示后来临时留了一节预备的方案

weixin_33923762·2023-10-31 22:40

推荐频道

雪碧图