这是我参与更文挑战的第28天，活动详情查看： 更文挑战
写作背景
事情是这个样子的。
公司的APP有个关于我们的板块（大家都有），原本是很单纯很素的文本，最多是加粗和标题。
但是公司新来的美女设计给它改了改，变得美丽又富有设计感。
但这就导致了，原本后端用富文本编辑器就能搞出来的“关于我们”板块，变得不再简单。
于是就需要考虑前端切图，并且存储在后端。
我之前写过一篇关于虚拟dom的文章，就想着手写一个dom，把样式、内容、图片、层级在对象中提现出来，并用类名控制样式。
然后写个css文件丢在后端，这样子就可以通过在服务器修改dom和css来保证前端的内容是动态的。
但是最终还是否了，因为uni-app的rich-text富文本标签虽然支持渲染数组，但是面对一个富有设计感的页面，要存储的内容还是过多了，手动去写，忒麻烦。
最后，综合项目考虑，只是静态界面，没有交互，需要在不更新APP的情况进行动态修改。
于是，我们又了一个原本认为很low的做法：用图片。
是的，没错，直接怼一张图上去，反正设计中也要引入不少的图片做背景，干脆整个界面就是一张图了。
问题浮现。
当时以为图片缩小，精度不会丢失太多，反而是屏幕大的情况下，会糊掉，就保存的一份比较宽的图片。
但是试试并不如此简单。他居然还是糊了。（代码不在本机，所以没法给大家看图了）；
于是，我在百度的帮助下，找到了如下解决方法
img {
image-rendering:-moz-crisp-edges;
image-rendering:-o-crisp-edges;
image-rendering:-webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
-webkit-font-smooting: antialiased;
}
image-rendering 用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。
之后我又去继续查了查，与下面的-ms-interpolation-mode的作用是一样的，都是选用一个名为最近邻居（nearest-neighbor）算法来达到缩小图片仍保持精度的一个属性。
最后我用了一个font-smooting属性，是因为在最终查看效果时，字体还是有点问题（明明都在图片里了），莫得办法，就加上了这个字体平滑属性。
结尾
又是被CSS打开认知的一小步。
