如何解决CSS盒阴影或像素图像的普通图像文件?
所以我想在Web应用程序中使用一些像素艺术。我使用的是普通的图像文件(.png
)用于像素图,并通过<img>
标签或background-image
属性将其导入。
但是后来我发现了这个site,它允许我绘制像素图,然后使用Box-shadow
属性将其转换为CSS。这使我想知道哪种方式能以原始方式还是Box-shadow
为我的应用带来更好的性能?
您能给我每种方法的优点和缺点吗?谢谢!
解决方法
通常,是的,如果要提高速度和性能,最好避免服务器往返以获取其他文件。
如果要下载
- 一个 CSS文件
- 一个 PNG
,并且您可以选择仅 下载 CSS文件,那么这是一个不错的选择。
您可以使用以下技术将实用程序图形硬编码到CSS文件中:
- 使用 Base 64编码对
.png
进行编码,并声明background-image
引用描述.png
的数据URI。
- 改为使用
.svg
并声明background-image
引用描述.svg
的数据URI(这次无需进行base-64编码,因为SVG已经基于文本了) li>
- 使用问题中引用的
box-shadow
技术
可能还有其他方法可以将实用程序图形硬编码到CSS文件中。
进一步阅读:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。