兄弟们平时写页面的时候是不是经常遇到这种场景明明背景图切好了position 和 size 也调了半天结果在不同屏幕下还是歪的有时候为了让一个标题有点质感只好去网上找一堆滤镜和动画代码改起来特别费劲。我最近在一个活动页项目里集中处理了“贴图效果”相关的问题顺便把 CSS 代码做了一轮压缩优化用的就是 CSSO 1.0 这个工具。这篇文章就把我完整的思路和能直接跑的示例代码分享出来包括背景贴图、渐变、遮罩、动画以及如何用 CSSO 1.0 压缩 CSS 减少加载时间帮助图片和纹理更快地呈现出来。这篇文章适合三种人一是刚学 CSS、对 background 系列属性还比较懵的前端新手二是想把页面“贴图”效果做得更精细、又不想引入重型框架的开发者三是关注页面性能、想在构建阶段压缩 CSS 体积的工程实践者。看完之后你会理解 CSS 中实现贴图效果的核心属性能自己封装一套基础的工具类也会用 CSSO 1.0 对多页面样式做优化。1. 背景与核心概念1.1 什么是“CSS 贴图效果”在网页开发里“贴图”通常不是指游戏里的纹理贴图而是指通过 CSS 把图片、渐变、图案、纹理等内容“贴”到页面元素上。最常见的实现方式是background-image配合background-size、background-repeat、background-position等属性控制贴图的位置和尺寸。我们可以把元素想象成一块画布background系列属性就是贴纸工具。比如一个按钮我们希望它显示一张金属质感的背景图同时图片不能拉伸变形此时需要设置.btn-metal { background-image: url(../images/metal.png); background-size: cover; background-repeat: no-repeat; background-position: center; }这段代码的意思是把金属纹理图片作为背景“cover”会智能缩放图片让图片完全覆盖按钮区域并保持宽高比多余部分裁掉no-repeat防止图片反复平铺center让图片居中。这是最基础的贴图用法但实际项目中往往会遇到更多细节问题比如多背景叠加、渐变纹理、遮罩裁剪、图案平铺、性能优化等等。1.2 CSSO 1.0 是什么CSSOCSS Optimizer是一个基于 Node.js 的 CSS 压缩优化工具。它的核心任务不是简单删除空格而是会解析 CSS 结构对选择器、属性、值做优化合并比如合并相同选择器的规则、压缩颜色值、删除无效属性等。CSSO 1.0 是它的早期稳定版本虽然现在已有更高版本但在一些老项目、旧构建环境中仍然被大量使用。使用 CSSO 1.0 优化之后CSS 文件体积通常会下降 10% 到 30%具体取决于原始代码的冗余程度。更小的 CSS 文件意味着更少的网络传输时间浏览器可以更快地解析样式贴图效果也就更快地“贴”到页面上。需要注意CSSO 1.0 是基于 Node.js 的命令行工具版本和运行环境需要和项目匹配后面我会给出一个常用的最小化配置。1.3 为什么要结合“贴图效果”聊 CSSO很多开发者把贴图效果和性能优化看成两件事先写视觉代码发布时再压缩。但实际上它们关系很大。如果背景图是一张比较大的位图CSS 文件里还堆满了冗余代码页面加载时会同时遇到图片请求慢和样式解析慢两个瓶颈。尤其活动页首屏有大量 Banner、纹理背景、按钮特效CSS 体积很容易超过 100KB。通过 CSSO 1.0 做压缩再把图片用雪碧图、Base64 或现代图片格式优化视觉层和性能层都能兼顾。2. 环境准备与版本说明2.1 基础环境本文示例以常见的前端静态页面项目为例你可以使用 Vite、Webpack、Gulp 构建也可以手动创建一个纯静态 HTML CSS 项目。主要需要以下环境Node.js建议 14 或 16 版本CSSO 1.0 在更低版本也能运行但现代构建环境通常使用 LTS 版本npm 或 yarn 包管理器一个代码编辑器推荐 VS Code浏览器推荐 Chrome 或 Edge方便调试 CSS 效果版本方面需要说明CSSO 1.0 是比较早期的版本对应 npm 包名是csso安装时可以使用csso1.0.8之类的固定版本。如果你使用的是csso最新版参数会有差异建议先查看npx csso --help的输出以实际环境为准。本文重点演示配置思路不是强行指定版本号。2.2 安装 CSSO 1.0在项目根目录打开终端执行npm init -y npm install csso1.0.8 --save-dev安装完成后可以查看版本npx csso --version如果控制台输出了1.0.8就说明安装成功。这里把它放在devDependencies中因为它只在构建阶段使用不参与运行时。2.3 示例项目结构为了便于讲解我建议创建这样一个结构css-texture-demo/ ├── src/ │ └── styles/ │ ├── base.css │ ├── texture.css │ └── animation.css ├── dist/ ├── images/ │ ├── metal.png │ ├── paper.png │ └── icon.png ├── index.html └── package.jsonsrc/styles用于存放源码dist用于输出压缩后的 CSS。images放贴图资源。这篇文章的代码都可以直接放进这个结构里运行。3. 核心属性拆解把“贴图”玩明白要做出更好的贴图效果不能只背属性和值还要理解它们之间的组合逻辑。下面我们拆解几个高频核心属性并给每个属性配上最小示例和常见误区。3.1 background-image设置第一张贴图background-image可以设置一张或多张图片多张图片用逗号分隔先写的层级在上。比如.hero { background-image: url(../images/banner_top.png), linear-gradient(to bottom, #1a1a2e, #16213e); }这里上面的banner_top.png会覆盖在渐变之上如果 PNG 有透明区域就能透出底下的渐变。注意如果图片本身不透明渐变部分就被完全遮挡所以多背景叠加时通常把透明 PNG 或带透明通道的 WebP 放在上层。常见误区是认为background-image只能填url()。实际上它可以填渐变函数linear-gradient()、radial-gradient()、conic-gradient()也可以填image-set()、cross-fade()等更现代的函数。在不需要外部资源的纯 CSS 图案中渐变函数能减少图片请求是非常好的贴图方案。3.2 background-size控制贴图尺寸background-size可以设置为固定尺寸、百分比、cover或contain。区别在于cover等比缩放图片直到完全覆盖背景区域可能裁剪。contain等比缩放图片直到整张图都在区域内可能留白。固定值例如100px 100px水平垂直都指定。百分比例如50% 50%相对于元素宽高计算。下面是一个平铺小纹理的示例.texture-paper { background-image: url(../images/paper.png); background-size: 160px 160px; background-repeat: repeat; }这里的160px可以控制纹理的密度。如果纹理是 80px 的方块我们放大到 160px 就会显得更稀疏如果想保持原始大小可以直接写background-size: auto。常见误区是使用background-size: 100% 100%拉伸图片这会导致图片变形不推荐用于照片类纹理。建议使用cover或contain具体看需求。3.3 background-repeat控制平铺方式平铺方向有repeat、repeat-x、repeat-y、no-repeat、space、round等值。space会尽量均匀分布可能在边缘留白round会根据容器尺寸缩放图块让整体刚好铺满。举个例子如果我们想要一条横向重复、但保持原始大小的虚线纹理.divider { width: 100%; height: 4px; background-image: url(../images/dot.png); background-repeat: repeat-x; background-size: 8px 4px; }这种技巧常用在分割线、虚线边框、进度条底纹上。注意round可能会导致图片缩放如果纹理对清晰度要求高慎用。3.4 background-position控制贴图位置background-position有两个值水平方向和垂直方向。支持关键字left、center、right、top、bottom也支持像20px 30px、10% 20%这样的值。一个典型场景多个图标合在一张雪碧图里通过切换定位显示不同图标。.icon-home { background-image: url(../images/icons.png); background-size: 100px 200px; background-position: 0 0; } .icon-user { background-image: url(../images/icons.png); background-size: 100px 200px; background-position: -50px 0; }上面假设雪碧图是 100px 宽每个图标占 50px。background-position向右移动 50px就显示出第二个图标。如果配合background-size缩放雪碧图的坐标计算会变得复杂需要借助变量或 CSS 预处理函数。3.5 渐变用代码贴出细腻纹理渐变是纯 CSS 贴图手段中的利器。线性渐变linear-gradient()的完整语法包含方向、色标等参数。例如模拟一张金属拉丝纹理.metal { background-image: linear-gradient( 75deg, #c0c0c0 0%, #ffffff 30%, #808080 50%, #d3d3d3 70%, #a0a0a0 100% ); }这里的角度 75deg 让渐变斜向延伸多个色标交替深浅形成类似拉丝的感觉。使用时可以多叠几层渐变配合background-blend-mode混合模式能做出更丰富的质感。除了线性渐变径向渐变radial-gradient()也常用于模拟光晕、球体高光。像“涟漪光圈扩散”这种热词效果核心就是多个同心圆渐变加动画。3.6 mask 与 clip-path剪出特殊形状CSSmask属性可以给元素设置遮罩层遮罩的透明区域决定元素显示区域。它和 Photoshop 的蒙版类似。举个例子让一张图片以圆形渐变方式淡出.fade-circle { width: 300px; height: 300px; background: url(../images/scene.jpg) center/cover; -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 70%); mask-image: radial-gradient(circle, #000 60%, transparent 70%); }上面的mask-image使用径向渐变中心黑色不透明边缘透明所以图片中心显示边缘淡出。注意mask目前一些浏览器还需要-webkit-前缀。clip-path则更直接地裁剪元素显示区域不透明度变化没有过渡适合做几何形贴图比如六边形头像、圆角卡片等。3.7 文字与内容贴图background-clip有时候我们想让文字显示图片纹理比如金色质感标题可以使用background-clip: text。先看示例.gold-text { background-image: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 48px; font-weight: 900; }这里把背景渐变裁剪到文字区域文字本身颜色设为透明于是文字就显示出金色渐变的“贴图效果”。这个技巧常用来做标题、 logo、数字高亮。需要注意background-clip: text目前在 Chrome、Edge 中需要-webkit-前缀同时不要忘记设置color: transparent否则文字颜色会盖住背景。如果想实现“金光闪闪”的动态效果可以在背景渐变上叠加动画移动背景位置让高光在文字上流动。3.8 CSS 变量与伪元素让贴图效果更灵活CSS 自定义属性变量可以让我们把贴图参数提取出来通过伪元素或类名复用。比如定义一组胶囊纹理:root { --texture-opacity: 0.4; --texture-blur: 0px; --texture-scale: 1; } .card::before { content: ; position: absolute; inset: 0; background-image: url(../images/noise.png); opacity: var(--texture-opacity); filter: blur(var(--texture-blur)); transform: scale(var(--texture-scale)); pointer-events: none; }使用 CSS 变量之后可以通过 JS 动态修改--texture-opacity或者给不同类名设置不同的变量值实现多样化的贴图效果而不需要重复写一整段背景逻辑。这也是“CSS 类根据参数不同使用不同的类”的实现思路。4. 完整实战打造一套带纹理的活动页贴图效果并压缩现在我们把上面的知识点串起来做一个贴近真实业务的活动页示例。页面包含背景纹理层、金色渐变标题、涟漪光圈、卡片网格布局以及一个鼠标悬浮的过渡效果。最后用 CSSO 1.0 对 CSS 进行压缩优化。4.1 创建项目结构打开终端创建目录和文件mkdir css-texture-demo cd css-texture-demo mkdir -p src/styles dist images touch index.html src/styles/base.css src/styles/texture.css src/styles/animation.css如果你用的是 Windows CMDtouch可能不可用可以使用编辑器手动创建文件或者使用 Git Bash。4.2 编写 HTML 文件文件路径index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleCSS/CSSO1.0 更好的贴图效果实战/title link relstylesheet hrefsrc/styles/base.css / link relstylesheet hrefsrc/styles/texture.css / link relstylesheet hrefsrc/styles/animation.css / /head body section classhero h1 classgold-text金属质感标题/h1 p classhero-desc通过 background-clip 让文字显示渐变纹理/p div classripple-btn悬浮按钮/div /section section classcards div classcard style--accent: #ff6b6b div classcard-icon icon-home/div h3卡片标题/h3 p使用背景贴图、渐变和遮罩的示例卡片。/p /div div classcard style--accent: #4ecdc4 div classcard-icon icon-user/div h3卡片标题/h3 p使用 CSS 变量控制不同卡片的强调色。/p /div div classcard style--accent: #ffe66d div classcard-icon icon-star/div h3卡片标题/h3 p配合 hover 过渡提升交互质感。/p /div /section /body /html这里 HTML 没有使用任何 JavaScript便于我们专注 CSS 和构建压缩。4.3 编写基础样式文件路径src/styles/base.css/* 基础重置与布局 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: PingFang SC, Microsoft YaHei, sans-serif; background: #f5f7fa; color: #333; line-height: 1.6; } .hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; padding: 60px 20px; overflow: hidden; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); } .hero::before { content: ; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(../../images/noise.png); opacity: 0.15; pointer-events: none; } .hero-desc { color: rgba(255, 255, 255, 0.8); margin-top: 12px; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; max-width: 1200px; margin: -40px auto 60px; padding: 0 20px; position: relative; z-index: 2; } .card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); } .card h3 { margin: 16px 0 8px; color: var(--accent, #333); } .card p { font-size: 14px; color: #666; }这段样式里我使用了 CSS Grid 来布局卡片列表auto-fit和minmax让卡片在不同屏幕宽度下自动换行非常实用。这正好也是很多同学关心的“CSS Grid 布局自适应”的常见写法。4.4 编写贴图与纹理样式文件路径src/styles/texture.css/* 文字渐变纹理 */ .gold-text { background-image: linear-gradient( 135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c ); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 48px; font-weight: 900; text-align: center; animation: shine 3s linear infinite; } keyframes shine { to { background-position: 200% center; } } /* 涟漪光圈扩散按钮 */ .ripple-btn { position: relative; margin-top: 30px; padding: 12px 32px; border-radius: 50px; background: linear-gradient(90deg, #ff9966, #ff5e62); color: #fff; font-weight: 600; border: none; cursor: pointer; overflow: hidden; z-index: 1; } .ripple-btn::before { content: ; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transform: translate(-50%, -50%); transition: width 0.6s ease, height 0.6s ease; } .ripple-btn:hover::before { width: 200px; height: 200px; } /* 光圈扩散动画 */ .ripple-btn::after { content: ; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transform: translate(-50%, -50%); animation: ripple 1.5s ease-out infinite; z-index: -1; } keyframes ripple { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 160px; height: 160px; opacity: 0; } } /* 雪碧图图标 */ .card-icon { display: inline-block; width: 48px; height: 48px; background-image: url(../../images/icons.png); background-size: 144px 48px; } .icon-home { background-position: 0 0; } .icon-user { background-position: -48px 0; } .icon-star { background-position: -96px 0; } /* 卡片纹理遮罩示例 */ .card::before { content: ; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 16px; background-image: url(../../images/paper.png); opacity: 0.08; pointer-events: none; }这里用到了background-clip: text实现金属文字质感用伪元素涟漪实现光圈扩散用雪碧图定位切换图标还通过opacity给卡片增加了一层纸质纹理。需要特别说明的是card在base.css中没有设置position: relative而这里card::before使用了position: absolute所以记得在base.css的.card中补上position: relative否则伪元素会跑去最近的定位祖先。我们在实际项目中要避免这种跨文件的隐性依赖这里为了示例简洁先这样实现。4.5 编写动画与 flex 布局自适应文件路径src/styles/animation.css/* 呼吸灯与入场 */ keyframes breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } } .hero .gold-text { animation: shine 3s linear infinite, breathe 2s ease-in-out infinite; } /* flex 子元素宽度自适应示例 */ .cards { display: flex; flex-wrap: wrap; justify-content: center; } .cards .card { flex: 1 1 240px; max-width: 320px; } /* 文字竖排 */ .intro-vertical { writing-mode: vertical-rl; letter-spacing: 4px; } /* hover 延迟关闭 */ .card { transition: transform 0.3s ease 0s, box-shadow 0.3s ease 0s; } .card:hover { transition-delay: 0.05s; }这段样式里我们把.cards同时设置了display: flex和 flex-wrap卡片可以使用flex: 1 1 240px自动伸缩。这与刚才的 Grid 方案并不冲突实际项目中一般只会用其中一种这里是为了展示两种主流写法。writing-mode: vertical-rl可以让文字竖排适合用在侧边栏装饰文字。另外在.card:hover中设置transition-delay可以实现“鼠标移入后稍微延迟一下再触发动画”的柔和效果这也是“hover 延迟关闭”的一种应用。4.6 使用 CSSO 1.0 压缩 CSS现在通过 CSSO 1.0 把src/styles下的三个 CSS 文件合并压缩到dist/styles.min.css。CSSO 1.0 的命令行用法很简单npx csso src/styles/base.css src/styles/texture.css src/styles/animation.css --output dist/styles.min.css执行后可以用ls -lh dist查看文件大小。如果希望保留可读性但减小体积可以不指定输出文件它会直接把结果输出到终端。实际使用中我们通常会把多个 CSS 文件先合并再压缩上面的命令已经把多个输入文件合并为一个输出文件。如果想在 npm 脚本里集成可以在package.json中添加{ scripts: { build:css: csso src/styles/base.css src/styles/texture.css src/styles/animation.css --output dist/styles.min.css } }然后运行npm run build:css这样每次样式更新后只要执行这个命令就能重新压缩。4.7 验证压缩结果打开dist/styles.min.css你会看到所有空格、换行都被去掉了部分颜色值也被压缩成更短的写法。比如#ff9966可能保持不变因为已经是 6 位而#ffffff有可能会被压缩成#fff具体取决于 CSSO 1.0 的优化策略。为了验证压缩前后是否影响页面可以把index.html的link指向dist/styles.min.css重新刷新页面。如果视觉效果没有变化说明压缩成功如果某些样式丢了大概率是 CSS 写得不规范例如缺失分号、拥有非标准属性、或者background-clip: text的-webkit-前缀被压缩掉。针对最后一个问题CSSO 1.0 默认保留浏览器前缀但保险起见建议压缩前确认所有兼容性写法都有标准和非标准两套。5. 常见问题与排查思路在实际开发和压缩过程中我整理了几类高频率问题专门列出来供大家对照排查。问题现象常见原因解决思路背景图不显示路径错误或 CSSO 压缩后相对路径失效检查url()路径是否基于 CSS 文件位置建议使用小图片转 Base64 或打包工具统一处理背景图被拉伸变形使用了background-size: 100% 100%改为cover或contain根据设计稿要求选择压缩后样式错乱CSS 文件缺少分号、属性顺序不合理或被优化器误删先压缩单一文件并对比使用csso --restructure-off关闭重构再逐步排查背景图加载后闪烁图片文件过大或首次加载慢使用雪碧图、图片懒加载、预加载关键背景图CSS 压缩辅以 CDN 缓存文字渐变“贴”不出来background-clip: text不支持或color未设为透明检查浏览器兼容性补全-webkit-前缀设置color: transparentCSS 变量在伪元素中不生效变量定义在未加载的样式文件中或伪元素没有继承变量在:root或父级元素定义变量确认 CSS 文件加载顺序动画卡顿渐变背景、filter或backdrop-filter消耗性能减少不必要的filter使用transform和opacity做动画避免动画大块阴影如果你压缩后遇到样式丢失我推荐一个排查顺序用开发者工具查看元素计算样式确认background-image是否被应用。检查dist/styles.min.css中对应属性是否存在若不存在打开源码 CSS 找问题。临时禁用 CSSO 的--restructure参数再压缩观察是否恢复正常。检查图片资源是否被 URL 编码或路径改写在浏览器 Network 面板确认请求状态。6. 最佳实践与工程建议经过前面这些示例相信你已经掌握了很多实现贴图效果的方法。在实际项目中为了让效果稳定、维护方便我建议你从下面几个维度做工程化控制。6.1 视觉资源的工程管理不要把图片全部零散放在images目录里建议按类型拆分images/ ├── textures/ # 纹理、噪点、纸张等贴图 ├── icons/ # 图标雪碧图 ├── backgrounds/ # 大背景图 └── uploads/ # 内容图片纹理类小图如果使用频率高可以合并成雪碧图。图标类建议统一为 SVG或者生成 iconfont。大背景图要经过压缩工具处理优先使用 WebP/AVIF 格式并配置响应式图片srcset。6.2 使用 CSS 变量统一贴图参数将贴图的透明度、缩放、混合模式等作为变量放在:root中方便整体调整。虽然 CSS 变量在性能上略逊于静态值但它带来的可维护性收益非常大尤其是在主题换肤场景中。:root { --texture-noise: url(./images/textures/noise.png); --texture-opacity: 0.12; --texture-mix: overlay; } .texture-card { background-image: var(--texture-noise); background-blend-mode: var(--texture-mix); } .texture-card::before { opacity: var(--texture-opacity); }6.3 压缩策略CSSO 1.0 的合理使用我在项目里通常分三步完成样式压缩使用 PostCSS 先做前缀补齐和现代语法降级例如autoprefixer。使用 CSSNano 或 CSSO 做压缩。将压缩后的 CSS 与图片资源一同上传 CDN设置长缓存。如果项目构建环境允许也可以使用 Webpack 的css-minimizer-webpack-plugin它内部支持cssnano而 CSSO 1.0 更多用在 Gulp 或纯命令行环境中。无论哪种工具都需要在本地验证压缩结果避免生成工具有 bug 影响生产。6.4 安全与性能边界不要用 CSS 上传大尺寸背景图首屏图片尽量控制体积在 200KB 以内。涉及mask、clip-path、filter等高成本属性时不要在大面积区域长期播放动画。使用will-change: transform时注意别滥用不然会占用更多 GPU 内存。生产环境不要直接调试压缩后的 CSS建议生成 Source Map。对于多背景、渐变等基础贴图还有一个小技巧把重复纹理作为基础样式把品牌色、强调色放到组件业务样式里避免每张卡片都重复写一整段background-image。6.5 移动端适配提醒移动端设备屏幕尺寸差异大背景图贴图建议配合background-size: cover同时注意内容区域不要被背景图案干扰阅读。可以添加一个半透明遮罩层降低纹理对比度.card-text { background: rgba(0, 0, 0, 0.35); padding: 12px; border-radius: 8px; }这样即使在纹理复杂的背景上文字依然能保持可读性。7. 总结与学习路线这篇文章围绕“更好的贴图效果”这一话题先讲了 CSS 贴图相关的核心属性包括background-image、background-size、background-repeat、background-position、渐变、mask、background-clip等然后通过一个活动页实战把这些属性组合成金属文字、涟漪光圈、雪碧图图标、纸质纹理等效果最后介绍了 CSSO 1.0 的压缩用法和常见问题排查方法。对于刚接触 CSS 的读者我建议下一步深入学习两个方向一是 CSS Grid 和 Flex 布局因为贴图效果通常要放到具体布局中才能体现价值二是 CSS 动画性能优化理解compositor、layer和paint的区别这样可以让渐变、光圈等效果更加流畅。对于有经验的开发者建议把精力放在构建工具链上把 PostCSS、CSSO 或 CSSNano 集成到项目中形成可持续的样式工程化流程。CSS 的贴图能力看起来简单实际组合起来变化非常多。你完全可以基于这篇文章的示例把背景换成一个可以动态变化的 CSS 变量再配合 JS 的交互做出类似在线纹理配置、主题换肤等功能。动手改一改代码跑一下 CSSO 压缩多观察浏览器 DevTools 里的性能曲线很快就能找到属于自己的最佳实践。如果这篇文章对你有帮助可以收藏备用也欢迎在评论区聊聊你遇到过哪些棘手的贴图问题。后续我会继续整理 CSS 高级效果、前端构建优化等实战内容感谢阅读。