CSS——精灵图

CSS------精灵图

目录

什么是精灵图?

精灵图(Spritesheet)是指将多个小图标、图像或动画合并到一个大图像中 的技术。在网页设计和游戏开发中,精灵图通常用于减少网络请求次数和优化页面性能,通过减少加载多个小图标的请求,从而加快页面加载速度

本篇仅以使用精灵图为示例,不涉及PS相关技术

导入精灵图

首先将准备好的精灵图导入css语法中

css 复制代码
.icon1 {
                width: 270px; /* 设置图标的宽度 */
                height: 70px; /* 设置图标的高度 */
                background-image: url('../static/img/icon.png'); /* 设置精灵图的路径 */
            }

CSS也支持其他语言的模版语法,例如Django中可以写成

css 复制代码
background-image: url('{% static 'img/icon.png' %}');

裁剪精灵图

定义三个元素坐标

css 复制代码
.rank1 {
    background-position: -530px 0;
}
.rank2 {
    background-position: -530px -70px;
}
.rank3 {
    background-position: -530px -140px;
}

background-position 属性指定了背景图像在元素内的位置,其中 -530px 表示水平方向的偏移量,-140px 表示垂直方向的偏移量

使用精灵图

方式1

直接作为标签背景使用

html 复制代码
<div class="icon1 rank3" style="margin-top: 5px">
    <p style="margin-top: -5px">总排行</p>
</div>

效果:

方式2

作为内嵌元素使用

html 复制代码
<p>崩坏星穹铁道</p>
<em class="icon2 crown2"></em>

效果:

html 复制代码
<p>崩坏星穹铁道</p>
<em class="icon2 crown2"></em>

效果:

相关推荐
YGY Webgis糕手之路2 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔2 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang2 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔2 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任2 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴3 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔3 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js
德育处主任3 小时前
p5.js 矩形rect绘制教程
前端·数据可视化·canvas
前端工作日常3 小时前
我学习到的babel插件移除Flow 类型注解效果
前端·babel·前端工程化
前端工作日常3 小时前
我学习到的 Babel 配置
前端·babel·前端工程化