当前位置：
模糊背景图 手机壁纸图片
原创共享素材
编号：&&&&上传时间：&&&&大小：0.788 M
分辨率：300dpi&&&&
尺寸：20像素 &&&&格式：JPG &&&&颜色：RGB
关&键&词：模糊背景图 手机壁纸 banner背景图 背景图 大尺寸素材 设计 底纹边框 背景底纹 banner
设计 底纹边框 背景底纹 300DPI JPG
图片描述：模糊背景图片 抽象 设计 光 模板 壁纸 装饰 背景 虚化 模糊 离焦 网页设计 矢量设计 背景底纹 底纹边框 banner底纹 轮播背景 设计素材 海报素材
&昵图网所有作品均是用户自行上传分享并拥有版权或使用权，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
商用正版图片css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题
最近在负责一个微信H5 App项目，遇到一个郁闷的问题，手机查看网页时图标都是模糊的，有锯齿，电脑浏览器显示则是正常。大概知道是分辨率适配等类型的问题，后来网上查找了一些办法，大部分的解决方案都是设计一套放大1倍的图标，再压缩显示。
我们都知道标签可以通过固定宽高的方式来压缩大图，从而得到高清的显示效果，而图标一般用背景图来呈现，怎么搞呢？好吧，css3出了一个很牛逼的属性background-size可以直接设置背景图的宽高，直接解决了前者的疑惑。
那么问题来了，我们的网页不可能每个图标都独立一张图片来加载，那样每张图片将会是一个http请求开销，我们一般的做法是把多张小图片拼在一张大图里，然后通过sprite(精灵)background-position定位的方法来解决，只要加载一张大图，就可以完成多个图标的显示，减少http请求开销，提高性能。所以，我们也希望把放大1倍的高清图标也拼在一张大图里，通过background-position来定位到每个对应的图标上，并进行压缩。网上找了很多方法，终于找到了一个靠谱的方案：
1）首先，我们要准备两张排成一行(必须排成一行，下面解释)的图片，一张是原始大小，另一张是放大1倍的大小
（map-icon.png）
2) 最初的写法，主要是在电脑浏览器上显示，我们使用原图map-icon.png即可
//网页标签：
/* 装载图标的容器，固定宽高，内距设为0 */
.control { display: text-decoration: padding: 0; width: 30 height: 30 }
/* 图标标签，宽高自动填充 */
.position,
.zoom-out {
width: 100%;
height: 100%;
background: url(images/map-icon.png) no-
.car { background-position: 0 0; }
.position { background-position: -30px 0; }
.zoom-in { background-position: -60px 0; }
.zoom-out { background-position: -90px 0; }
3) 问题是，我们怎么知道background-size属性值要设置为多少？后来找到有一个公式：
高分辨率图像宽度 / 目标图像宽度 = X
原始Sprites图像宽度 / x = background-size的宽度值
好吧，公式的原理我们就不在这里展开了，直接写上去试试：
60 / 30 = 2 即放大倍数
7张60x60的大图总宽度 420
420 / 2 = 210 即background-size的宽
而background-size的高，我们这里设置为auto即可，然后换上@2x的大图进行压缩
还有，我们必须在外层声明一个Media Queries，该Media Queries专门针对Retina屏幕设备显示器
/* 移动端媒体查询像素比 */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
.position,
.zoom-out {
background: url(images/) no-
background-size: 210
/* 注意这里还是按30像素大小的位置来查找 */
.car { background-position: 0 0; }
.position { background-position: -30px 0; }
.zoom-in { background-position: -60px 0; }
.zoom-out { background-position: -90px 0; }
相反，貌似也可以给定高度的值，宽度取auto自适应，但我尝试过，不太容易成功。我们以后就直接用一行图标排开，给背景图宽赋值就行了！
最后，给出使用此方案的前后效果图：
（处理前）
（处理后）安卓手机如何设置壁纸 壁纸很模糊是什么原因_安卓教程_好卓网
安卓手机如何设置壁纸 壁纸很模糊是什么原因
　　为什么壁纸很模糊?随着这手机的屏幕分辨率的提升，这手机的屏幕显示效果也是越来越好，不过这壁纸的选择让大家也是格外的头疼，那么这壁纸模糊是什么原因呢?
　　为什么壁纸很模糊?
安卓手机如何设置壁纸 壁纸很模糊是什么原因
　　这主要是因为这分辨率与手机壁纸不适配，高分辨下这手机壁纸会进行裁剪，这样的结果就导致了这手机壁纸的模糊，碰到这样问题的用户们不妨借用一些壁纸工具进行设置，或者是下载相关手机型号的壁纸，这就就可以避免这个问题。
　　安卓手机的分辨率提升非常的快，这手机壁纸模糊的问题可以通过上述的方法进行设置，当然借用某些助手也是可以的，更多技巧请大家继续留意好卓网的后续更新。
分享到其他平台:
作为MIUI系统最新版的MIUI7一直备受米粉的关注，今天小米的官方微博放出了MIUI7稳定版更新公告，将在10月27日开放MIUI7稳定版升级，不过并不是所有机型都支持MIUI7稳定版，下面就来看看
在10月21日的魅蓝新品发布会上，魅族新机魅蓝metal正式与大家见面，魅蓝metal16G版本售价1099，32G版本售价1299，现已在各个渠道开启预售，将于11月2日正式发售，11月11日开始现货销售。
用读卡器读不出内存卡的原因有多种，这里我们需要用排除法来一一排除，在内存卡和电脑的连接中有内存卡、读卡器、USB接口、以及电脑本身4个对象可能出错，下面就从最简单的开始
怎么把下载的歌曲放到手机内存卡中?这个有两种方法，一种是用手机管理软件把手机和电脑相连，然后传送歌曲，还有一种是把手机作为普通存储器连接电脑，直接把歌曲拷贝到指定的
一、ROM 特色 1. 应群机友的建议和帮助，保持官方原貌下增添部分实用APP编译，精致精简714M、【如果喜欢长期使用又简单的机油可以尝试下】 2. 官方10.5.A.0.233最终版本内核基带 3. 增加
一、ROM 特色 1. 移植Z3的有声照片 2. 移植Z3的的AR趣拍 3. 移植Z3的动态镜头 4. 移植Z3的最新相册 5. 移植Z3的超逼真 6. 移植Z3的XReality 7. 移植Z3的媒体声音 8. 移植Z3的主题和壁纸 9. 移植Z3的
装机必备软件
装机必备游戏Blur模糊壁纸
Blur模糊壁纸
综合评分：
Blur可以将壁纸进行模糊化处理，从而带来朦胧的效果，做出像iOS7一样毛玻璃感觉的壁纸。
其他帐号登录:
为此应用打分：
请填写评论内容
(高速下载)
应用相关文章
大家都在玩
热门安卓应用
穿越火线手机版
爱奇艺视频
360手机游戏大厅
最近浏览过的应用
Blur模糊壁纸}