图像、CSS、JavaScript）因此必须将

相同的原理应用于 Web。网站或者最近的网络应用程序变得越来越复杂甚至取代了许多桌面应用程序因此用户在开始体验之前必须首先下载越来越多的信息。 尽管近年来查看网站所需的文件大小急剧增加但越来越多的人正在升级他们的互联网连接宽带已成为许多国家的常态。这个周期符合硬件升级理念理论上应该可以消除任何潜在的用户体验问题。 然而Web 开发人员也陷入了许多应用程序开发人员以前遇到的同样的陷阱。随着布局变得更加复杂需要更多图像因此开发人员创建更多图像 - 即使它们是精灵。这似乎是一个合理的断言但这并不意味着它是最好的解决方案。 技术上的转变 由于网络的限制出现了许多创造性的问题解决方案。但网络并不是唯一可能存。



在非常严格限制的地方。创新力求限制。一个很好的例子是在标志性游戏《超级马里奥兄弟》中灌木丛只是重新着色的云彩。 这个非常简单但极其有效的实现让我思考如何重用常见的界面元素欺骗用户相信相同的东西是不同的！ 现在我们来谈谈转折点这个想法是创建一个透明的精灵让其background-color能够显示出来。如果您熟悉 CSS Sprites您应该能够相对轻松地掌握这种变化。 简单地说将具有透明“剔除”透明中心的图像放置在背景颜色上。更改背 购买电话号码列表 景颜色会更改元素的外观。您唯一需要注意的是图像透明部分周围的颜色与您使用该技术的背景相匹配。这可以防止背景颜色渗透到图像的其他部分。 无论如何这种技术在示例中更容易理解...... 例子 ＃ 120+ 原生 React UI 组件与 Next.js 完全兼容 尝。







试 KENDOREACT 以下示例仅由三张图像组成。一张用于所有字体示例一张图像用于两组水滴包括悬停和活动状态一张图像用于所有按钮。字体图像包含白色背景上的透明字体这意味着它们在白色背景上不可见。保存示例中的文件在您喜欢的图形编辑器中打开它您将看到透明字体。 水滴 水滴图像在上面的示例中用作颜色选择器。单个图形包含两个不同背景上的渐变滴因此background-color可以正确遮盖。该图像包含现代交互界面中使用的所有三种状态——静态、悬停/焦点、按下/活动。 按钮 按钮技术是使用此技术的最灵活且可能最有用的方法。一个简单的精灵图像包含两种状态 - 静态和悬停/焦点 - 然后将其放置在文本上以创建按钮。只需添加一个background-color即可使该按钮在您的应用程序或网。