Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.9k views
in Technique[技术] by (71.8m points)

如何制作 @2x @3x 的雪碧图 和 在css里引用雪碧图

在做响应式网站过程中,遇到图片处理的困扰。

因为:在1倍屏上用2倍图,图会模糊。 在2倍屏上用1倍图,图也会模糊。所以最佳适配是在1倍屏用1倍图,2倍屏上用2倍图。

我的问题如下:

1,在3倍屏上用2倍图,或在2倍屏上用3倍图,是不是也会模糊?

2,在制作@2x和@3x图时,是不是先做@1x图,再等比例放大?需要注意什么?

2.1,以PS为例,如果@1x图里的图形是‘形状’,那么放大后还不至于失真,如果图形是PNG或智能对象,使用“保留细节2.0”采样放大后多少还是会模糊,这种情况下是不是应该把“形状”的图形与“智能对象”的图形分开生成? 把矢量的放大,把“智能对象”的用最高清的素材?

3,雪碧图,@2x和@3x的实际像素已经放大,但在样式里引用时,background-position 和 backgroun-size 两个样式的值是不是保持不变? 图片及代码如下:其中的 "-90px 0px" 和 "300px 200px"

image.png

background:url('[email protected]') no-repeat -90px 0px;
/* background:url('[email protected]') no-repeat -90px 0px; */
/* background:url('[email protected]') no-repeat -90px 0px; */
background-size: 300px 200px;

4,如果@2x和@3x图使用手工对齐里面的图形,会导致图形之间的间距与@1x图不成比例,就没法用固定的 background-position 来统一定位了。请问这种倍率图该如何统一间距问题呢?

5,如果不使用雪碧图,就会形图N多个图标,如下图:一想到这N多图都要调用N多请求,就难受了。在响应式里,有些图只需要@1x,有些图只需要@2x,有些图@1x和@2x都需要,又该如何规划雪碧图呢?

image.png

我没有使用 less 预编译和 webpack 等工具,想先把原理搞清楚后再渐近学习。问题有点多,还请有经验的朋友不吝赐教。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...