微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

CSS盒阴影或像素图像的普通图像文件?

如何解决CSS盒阴影或像素图像的普通图像文件?

所以我想在Web应用程序中使用一些像素艺术。我使用的是普通的图像文件.png)用于像素图,并通过<img>标签background-image属性将其导入。

但是后来我发现了这个site,它允许我绘制像素图,然后使用Box-shadow属性将其转换为CSS。这使我想知道哪种方式能以原始方式还是Box-shadow为我的应用带来更好的性能

您能给我每种方法的优点和缺点吗?谢谢!

解决方法

通常,是的,如果要提高速度和性能,最好避免服务器往返以获取其他文件。

如果要下载

  • 一个 CSS文件
  • 一个 PNG

,并且您可以选择仅 下载 CSS文件,那么这是一个不错的选择。


您可以使用以下技术将实用程序图形硬编码到CSS文件中:

  1. 使用 Base 64编码.png进行编码,并声明background-image引用描述.png
  2. 的数据URI。
  3. 改为使用.svg并声明background-image引用描述.svg的数据URI(这次无需进行base-64编码,因为SVG已经基于文本了)
  4. li>
  5. 使用问题中引用的box-shadow技术

可能还有其他方法可以将实用程序图形硬编码到CSS文件中。


进一步阅读:

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。