sprite&iconfont

本文详细介绍了CSS雪碧图的使用方法及优势,包括如何将多个背景图像整合为一张大图以减少HTTP请求,提升网页加载速度。同时,深入探讨了字体图标的应用,如Icomoon和阿里iconfont字库的使用步骤,以及字体图标在网页设计中的独特优势。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

简述:CSS雪碧图是一种处理网页背景图像的方式,将一个页面涉及到的所有零星背景图像都集中到一张大图。

使用雪碧图的好处:有效减少服务器接收和发送请求的次数,提高了页面的加载速度。

使用:bg-image、bg-repeat、bg-position;

给div大小:所需背景图像的大小;

再通过background-position: x y; 进行移动。

 



 

 

字体图标 : 可以做出与图片一样的事情,如改变透明度、旋转度…

本质:文字 so 可以改颜色、阴影、大小等效果 besides兼容性好

各种字体图标字库

Icomoon字库:http://www.icomoon.io

阿里icon font字库:http://www.iconfont.cn/

字体图标的使用:

Step1:下载字体解压压缩包

将fonts放到网站目录中;

Step2:css中声明自定义字体 (@font-face{…})

Step3:定义字体的样式 (盒子引用字体再各自定义样式也ok)

Step4:盒子应用样式

 

转载于:https://www.cnblogs.com/jinfengJeff/p/11101290.html

{ "name": "vue-admin-template", "version": "4.4.0", "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint", "author": "Pan <panfree23@gmail.com>", "scripts": { "dev": "vue-cli-service serve", "build:prod": "vue-cli-service build", "build:stage": "vue-cli-service build --mode staging", "preview": "node build/index.js --preview", "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml", "lint": "eslint --ext .js,.vue src", "test:unit": "jest --clearCache && vue-cli-service test:unit", "test:ci": "npm run lint && npm run test:unit" }, "dependencies": { "axios": "0.18.1", "core-js": "3.6.5", "element-ui": "2.13.2", "js-cookie": "2.2.0", "normalize.css": "7.0.0", "nprogress": "0.2.0", "path-to-regexp": "2.4.0", "vue": "2.6.10", "vue-router": "3.0.6", "vuex": "3.1.0" }, "devDependencies": { "@vue/cli-plugin-babel": "4.4.4", "@vue/cli-plugin-eslint": "4.4.4", "@vue/cli-plugin-unit-jest": "4.4.4", "@vue/cli-service": "4.4.4", "@vue/test-utils": "1.0.0-beta.29", "autoprefixer": "9.5.1", "babel-eslint": "10.1.0", "babel-jest": "23.6.0", "babel-plugin-dynamic-import-node": "2.3.3", "chalk": "2.4.2", "connect": "3.6.6", "eslint": "6.7.2", "eslint-plugin-vue": "6.2.2", "html-webpack-plugin": "3.2.0", "mockjs": "1.0.1-beta3", "runjs": "4.3.2", "sass": "1.26.8", "sass-loader": "8.0.2", "script-ext-html-webpack-plugin": "2.1.3", "serve-static": "1.13.2", "svg-sprite-loader": "4.1.3", "svgo": "1.2.2", "vue-template-compiler": "2.6.10" }, "browserslist": [ "> 1%", "last 2 versions" ], "engines": { "node": ">=8.9", "npm": ">= 3.0.0" }, "license": "MIT" }
03-18
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值