雪碧图第2页

Danmo 的学习之路（HTML——CSS）

文章目录meta标签选择器RGB、盒子模型、文档流盒子大小和圆角浮动高度塌陷和BFC定位字体族图标字体字体和文本背景渐变雪碧图表格表单过渡动画变形less弹性盒子像素和移动端响应式布局10.2获得前端三剑客书籍第一次在

DanmoSAMA·2023-10-30 19:27

提升网页加载速度

1.减少http请求a)合并脚本和样式表，减少http请求数量从而缩短响应时间b)字体图标c)雪碧图d)图片地图知识点链接：http://www.w3school.com.cn/tags/att_img_usemap.asp

纪梦钰·2023-10-24 18:15

前端性能优化方案

1、加载优化雪碧图图片、列表的懒加载，路由懒加载静态资源使用cdn分发网络异步加载第三方资源首屏加载，预加载，代码压缩，减少打包的静态资源体积ssr服务器渲染2、缓存优化合理的使用浏览器缓存，强缓存，协商缓存

天空飘来·2023-10-24 09:02

web前端面试题@十八（前端优化★★★★★）

前端优化汇总一、图片处理1、雪碧图CSS雪碧图是以前非常流行的技术，把网站上的一些图片整合到一张单独的图片中，可以减少网站的HTTP请求数量，但是当整合图片比较大时，一次加载比较慢。

王芃皓·2023-10-23 22:22

微信小程序中css3实现序列帧动画

首先将序列帧动画图片合成一张图，可以使用下面的工具：合成“雪碧图”工具（https://www.toptal.com/developers/css/sprite-generator）动画组件index.

摘叶先生·2023-10-23 00:15

CSS动画效果-动起来的精灵图(雪碧图)

highlight:a11y-darktheme:cyanosis利用CSS让精灵图动起来主要使用了动画效果，精灵图的载在展示框中移动，展示框在可视屏幕上移动，就产生了在奔跑的假象下面做出来是这个效果：CSS的动画animation1、动画的基本使用制作动画分为两步︰1．先定义动画2．再使用(调用)动画我通过例题向大家展示一下动画是什么：style标签里的内容，javascriptdiv{widt

猫头_·2023-10-17 19:03

雪碧图练习

雪碧图.btn{display:block;width:42px;height:30px;background-image:url(3.png);background-repeat:no-repeat;

就是这么帅_567e·2023-10-17 10:08

HTTP 请求之合并与拆分技术详解

1.背景随着网站升级HTTP/2协议，在浏览页面时常常会发现页面的请求数量很大，尤其是小图片请求，经典的雅虎前端性能优化军规中的第1条就是减少请求数，在HTTP/1.1时代合并雪碧图是这种场景减少请求数的一大途径

腾讯技术工程·2023-10-11 02:36

vue中使用svg-sprite-loader

svg-sprite-loader使用教程开发环境vue-cli，svg-sprite-loader将加载的svg图片拼接成雪碧图，放到页面中，其它地方通过复用1.首先在src下建立以下目录和文件：src

鱼干拌饭·2023-10-03 19:27

解答前端面试每日 3+1 第17天

缺点：需要请求到全部数据之后才能展示，基本上已经不再使用table进行布局了[css]解释下csssprites的原理和优缺点是什么sprites(精灵图或者雪碧图)原理

小九咔咔·2023-10-03 13:02

前端性能优化方案都有哪些？

减少资源的使用、合理设置HTTP缓存，资源合并与压缩（web服务器开启gzip压缩等）css雪碧图、图片懒加载（或者加载首屏）。将外部脚本置底，避免浏览器加载js脚本而堵塞内容加载。

beijixing_233·2023-10-03 11:15

阿里icon小图标在vue中的教学使用（两种主流方案）

曾几何时，H5开发还是以雪碧图作为小图标的一种处理方案；然而，随着时间迁移，在当今前端开发环境中，icon小图标的使用率越来越高，需求越来越精致。

三月.暖阳·2023-09-27 09:38

Vue中使用SVG图标的步骤【钢镚核恒】

可缩放矢量图形（ScalableVectorGraphics）svg优势：任意缩放，超强显示效果，较小文件，可压缩svgo用来压缩svg中无用信息svg-sprite-loader将加载的svg图片拼接成雪碧图

「已注销」·2023-09-25 20:58

雪碧图

雪碧图.btn{display:block;width:42px;height:30px;background-image:url(3.png);background-repeat:no-repeat;

就是这么帅_567e·2023-09-23 19:18

html 中加载字体太慢,css字体文件包太大无法引入怎么处理？

这时，我们可能会采用两种方案：1、使用photoshop将文本图层单独导出成图片;2、直接引入改字体的字体库.ttf文件首先第一种方案的缺点，使用图片代替文字，制作和维护的成本很高,前期切图，合并雪碧图比较繁琐

Fyfutdr·2023-09-22 12:34

ShiningPeng·2023-09-21 07:01

krpano全景漫游(1.20.11版本)-添加热点动画以及文字

男人宫·2023-09-19 02:31

页面优化和性能优化，怎么减少http请求

a)合并js文件b)合并css文件c)雪碧图的使用d)使用base64表示简单的图片缓存：可以通过以下方面来描述：a)DNS缓存b)CDN部署与缓存c)http缓存由于浏览器会在DNS解析步骤中消耗一定的时间

爱前端的喵喵·2023-09-18 12:59

img标签内图片的雪碧图形式展示

lighterss·2023-09-18 11:58

图片拖动验证效果(源码)

图片拖动验证效果展示前置知识CSSsprite精灵图代码实现页面搭建距离计算逻辑部分随机生成背景图片计算拖动图块和空缺图块的位置绑定事件写在最后效果展示前置知识CSSsprite精灵图CSSSprite，我们一般叫他雪碧图或精灵图

G_ing·2023-09-17 00:06

css 雪碧图（精灵图）动画

原地动画.box{width:182px;height:325px;background:url(./2.jpg);animation:move1ssteps(8)infinite;}@keyframesmove{from{background-position:00;}to{background-position:-1472px0;}}移动逐帧动画.box{width:182px;height:

wangatong·2023-09-16 09:55

CSS3实现雪碧图动画

注意几点（以下示例）：雪碧图：由22张图片拼成的，雪碧图的宽度是设置动画元素的22倍关键帧设置：@keyframestest_anim{0%{background-position:00;}100%{background-position

羽筠·2023-09-16 09:53

前端性能优化方法

使用图像精灵或将多个图像合并成雪碧图，减少请求。4.异步加载资源：使用

滑梯plus版·2023-09-12 16:53

Vue学习笔记之 Svg图标组件的实现步骤

npminstallsvg-sprite-loader--save-dev--force2、配置svg图片处理规则通过使用svg-sprite-loader组件，将svg的图标文件生产雪碧图（Sprite

姠惢荇者·2023-09-08 20:47

vue项目webpack打包优化体积优化，打包体积减少200kb到4Mb

解决方法1.压缩图片应尽可能地压缩项目中的图片，或使用svg矢量图、雪碧图、webp图片（此种图片仅兼容谷歌和opera浏览器，但图片的体积更小）等小体积的图片，达到减少打包体积的目的。

shalDream·2023-08-29 18:08

HTML+CSS 查漏补缺

text-indent6，radio3，布尔属性4，contenteditable2，CSS1，透明度颜色样式值2，resize3，浮动4，vertical-align5，兄弟选择器6，伪类选择器7，精灵图（雪碧图

下雪天的夏风·2023-08-27 12:29

前端性能优化有哪些方法

1.浏览器http请求并发前端如何优化减少网络请求数：1)配置304请求，提高请求速度(这属于后端配置)2)将图标合成雪碧图，减少图片数量，减少http请求数3)使用webpack合并css和js，减少文件数量

努力学习前端中的小趴菜·2023-08-25 19:21

第三、四次课程总结

背景属性雪碧图：什么时候使用？

jiujiumi·2023-08-23 14:09

如何对项目中的图片进行优化

小图使用base64格式将多个图标文件整合到一张图片中（雪碧图）选择正确的图片格式：对于能够显示WebP格式的浏览器尽量使用WebP格式。因为WebP格式具有更好

songsshao·2023-08-11 09:02

css透明度和雪碧图

opacity:“范围”;直接输入范围，但父元素和子元素皆变透明2.background-color:rbga(x,x,x,范围)r:红，b:蓝，g:绿，a:不透明度只有背景颜色变透明两种方法按需要使用雪碧图应用用行内元素引用

Polaris_L·2023-08-10 09:57

gulp构建项目——生产环境/开发环境、生成雪碧图

新建项目Gulp-Project，执行npminit初始化项目生成package.json文件，然后再创建config文件夹，新建index.js（公共部分）、gulpfile.dev.js（开发环境）、gulpfile.prod.js（生产环境）。当然了，要打包编译的文件内容一般都放在都在根目录src里面。项目结构：Gulp-Project├──README.md├──config│├──gul

晴天守候·2023-08-06 15:12

性能优化

性能优化三种手段：一、减少请求数：1、小图片合并雪碧图、使用iconFont;2、合并CSS、JS文件；二、减少资源体积：1、精简代码；2、合并JS、CSS；3、使用Gzip,压缩技术方案；9AA90A7D

努力丶追逐时光·2023-08-02 17:55

前端必备 CSS Sprites雪碧图生成工具

[摘要]CSSSprites又称css精灵或者谐音css雪碧，是一种网页图片应用处理方式，今天为大家分享一个一键生成css雪碧图片的工具，复杂的事情简单化，提高开发效率。

神木惊蛰·2023-07-31 21:32

CSS Sprites 雪碧图

CSSSprites1.简介CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中，利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，访问页面时避免图片载入缓慢的现象。2.优点（1）CSSSprites能很好地减少网页的ht

淡然7698·2023-07-31 17:24

SVG图标，SVG symbols，SVG use标签

项目中图标的使用，趋势是使用svg作图标的，优点如下兼容现有图片能力前提还支持矢量可读性好，有利于SEO与无障碍在性能和维护性方面也比iconfont要强很多怎么在项目中优雅的使用svg图标，下面我们将采用类似雪碧图的做法

芝芝葡萄·2023-07-30 02:50

前端性能优化整理

性能调优文章目录性能调优原始链接从输入URL到页面解析经历的过程DNS解析优化TCP连接优化HTTP请求优化减少请求次数减少请求体积webpack优化图片优化jpegpngsvg雪碧图base64webP

shao.zq·2023-07-25 08:27

如何用js实现灵活的帧动画

代码示例一张100*500的雪碧图bo

阿敏91·2023-07-19 22:12

雅虎军规 - 前端优化

减少http请求数雪碧图合并js合并（一般合并到3~5个，css类似）css合并减少DNS查找次数不要在一个网站中有太多域用到CDN静态服务器DNS预解析//DNS预解析尽量免去不必要的跳转，比如index

蛋蛋大少爷·2023-07-17 03:39

【Vue】Vue3+Vite 实现 SVG 组件自动加载 icons 目录下所有文件

1.安装依赖插件vite-plugin-svg-iconsvite-plugin-svg-icons用于生成svg雪碧图。

努力挣钱的小鑫·2023-07-17 01:11

CSS面试题

目录1、雪碧图（精灵图）优缺点？2、less和Scss的配置使用以及特点？3、::before和::after中双冒号和单冒号有什么区别、作用？4、CSS3新增伪类，以及伪元素？

面相进程，面相对象·2023-07-16 03:59

猿人学试题（非常简单js混淆、雪碧图、样式干扰 css加密、js混淆源码乱码、js混淆动态cookie、访问逻辑）

学习目标：python学习—猿人学试题学习内容：1、非常简单js混淆2、雪碧图、样式干扰css加密3、js混淆源码乱码4、js混淆动态cookie5、访问逻辑1、非常简单js混淆试题连接:http://

yytkkn·2023-07-14 05:59

基于CSS3、原生JS、Vue3.0技术各自实现序列帧动画效果

需要自己去找一下雪碧图哦，比如阿里云、腾讯云官网有很多雪碧图的~1、使用纯CSS3方式实现import{ref}from'vue';exportdefault{name:'machineComponent

帅龍之龍·2023-07-13 22:24

background-position和雪碧图(CSS Sprites)用法 2021-03-23

background-position属性使用频率非常高，大量的网站为了减少http请求数，会将大量的图片图片合成一张雪碧图（Sprite）来使用。

猴逃逃·2023-06-24 11:25

【http系列】HTTP2.0新特性：二进制传输，多路复用，Haeder压缩，服务端push，QUIC协议

在HTTP1.X中，为了性能考虑，我们会引入雪碧图、将小图内联、使用多个域名等等的方式。

·2023-06-23 20:10

CSS sprites简单实例

关于雪碧图(csssprites)网上已经有非常详细的介绍，比如百度百科，最简单的来说，CSSsprite即把网页中比较小的一些小图片整合到一张图片文件中，再利用CSS的background-image

法海你懂不·2023-06-14 09:38

JS实现微信播音效果示例详解

看下面的这个图片就知道了，甚至于代码都不用贴：并不是雪碧图，当初不知道雪碧图是啥玩意儿，就是九张独立的图片。上图是使用Excalidraw来绘制。就是九个图片

·2023-06-12 14:58

vue优化小技巧

一些小图标，做成雪碧图能减少图片请求数据，建议只把那些固定的，后期不会修改的图标做成雪碧图，如果是那些要经常改动的就不建议这么做发，因为一旦要修改就连其它地方也要修改了，

_鹅不食草_·2023-06-09 03:41

手摸手，带你优雅的使用 icon

渐渐发现一个页面的请求资源中图片img占了大部分，所以为了优化有了imagesprite就是所谓的雪碧图，就是将多个图片合成一个图片，然后利用css的background-position定位显示不同的

涅槃快乐是金·2023-04-19 14:05

南慕瑶·2023-04-19 09:51

推荐频道

雪碧图