码迷,mamicode.com
首页 > Web开发 > 详细

web前端切图处理

时间:2016-05-08 06:39:41      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:

技巧:

一. 如何在 Retina 屏幕的设备使用更高分辨率的图片

以 MacBook Pro 为例,它的标准分辨率高达 2560 x 1600,但是如果真的以这个分辨率显示网页,网页的有效区域就小的可怜,而且字也会小的无法分辨。
因此通常 OS X 都会建议用户使用推荐的分辨率 1440 x 900。也就是说,网页中的内容需要被放大约 1.78 倍。
矢量的图形和字体问题不大,但是位图在放大后就会出现失真的情况。因此,你需要针对 Retina 屏幕设备使用更高分辨率。
 
1. 使用CSS3的background-size优化苹果的Retina屏幕的图像显示,通过CSS3 Media Queries为Retina屏幕设备提供一个高分辨率的图像 (http://www.w3cplus.com/css/css-background-size-graphics.html
"cover"值,可以让背景图像等比例放大到填满整个容器。
div { 
  background: url(logo.png) no-repeat;
  background-size: cover;
  height: 200px;
  width: 400px;
}

"contain"值可以让你的背景图像缩放到最大宽度和高度,并且让整个背景图像保持在容器内。

 

2.image-set实现Retina屏幕下图片显示(CSS4中对background-image属性定义的一种新方法,image-set)

在普通分辨率下,将调用“qqlogo_1x.png”图片,而在Retina屏幕下(比如iPhone4s,iPhone5,New iPad等IOS设备)下会调用“qqlogo_2x.png”图像,从而避免了Logo在Retina屏幕下显示不清晰的问题。

#test {
  background-image: url(assets/no-image-set.png); 
  background-image: -webkit-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
  background-image: -moz-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
  background-image: -o-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
  background-image: -ms-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
  width:200px;
  height:75px;
}

类似于不同的文本,图像也会显示成不同的:

  1.  不支持image-set:在不支持image-set的浏览器下,他会支持background-image图像,也就是说不支持image-set的浏览器下,他们解析background-image中的背景图像;
  2.  支持image-set:如果你的浏览器支持image-sete,而且是普通显屏下,此时浏览器会选择image-set中的@1x背景图像;
  3.  Retina屏幕下的image-set:如果你的浏览器支持image-set,而且是在Retina屏幕下,此时浏览器会选择image-set中的@2x背景图像。

image-set真的好强大,很可惜的是,他仅支持background-image属性,而不能使用在“技术分享”标签中。

 

 

 

 

 

 

 

 

web前端切图处理

标签:

原文地址:http://www.cnblogs.com/peng14/p/5469662.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!