阅读 979

css-图片缩小变模糊了。

这是我参与更文挑战的第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;
}
复制代码

MDN官方描述

image-rendering 用于设置图像缩放算法。它适用于元素本身,适用于元素其他属性中的图像,也应用于子元素。

之后我又去继续查了查,与下面的-ms-interpolation-mode的作用是一样的,都是选用一个名为最近邻居(nearest-neighbor)算法来达到缩小图片仍保持精度的一个属性。

最后我用了一个font-smooting属性,是因为在最终查看效果时,字体还是有点问题(明明都在图片里了),莫得办法,就加上了这个字体平滑属性。

结尾

又是被CSS打开认知的一小步。

文章分类
前端
文章标签