png素材

Hexo添加PWA支持

末鹿安然 提交于 2020-02-13 03:19:56
PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。在移动端利用标准化框架,让网页应用呈现和原生应用相似的体验。 —来自 百度百科 Progressive Web App , 简称 PWA,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。 PWA 能做到原生应用的体验不是靠特指某一项技术,而是经过应用一些新技术进行改进,在安全、性能和体验三个方面都有很大提升,PWA 本质上是 Web App,借助一些新技术也具备了 Native App 的一些特性,兼具 Web App 和 Native App 的优点。 PWA 的主要特点包括下面三点: 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现 体验 - 快速响应,并且有平滑的动画响应用户的操作 粘性 - 像设备上的原生应用,具有沉浸式的用户体验,用户可以添加到桌面 PWA 本身强调渐进式,并不要求一次性达到安全、性能和体验上的所有要求,开发者可以通过 PWA Checklist 查看现有的特征。 **推荐阅读:**https://lavas.baidu.com/pwa/README 可以了解一下什么是PWA 开始操作 ** 注意: **你的博客必须全站为HTTPS,这是使用PWA的基础条件 ** 注意:

解决IE6背景图片有灰白背景的情况 转

若如初见. 提交于 2020-01-13 14:01:23
前言 :IE6不支持png背景透明或半透明。其解决方法有IE滤镜,纯粹的JavaScript,以及jQuery等,正所谓事非经过不知难,让png图片在IE6下背景透明显示只是第一步,如果对这些png图片做进一步的操作,往往会出现各类莫名的问题。而本篇文章讲详尽阐述png背景透明会出现哪些问题,一些自己的经验之谈和一些相关的拓展。内容较多,有一定的深度和广度,希望对大家有帮助。 一、可解决的方法 1. IE css 滤镜 IE css滤镜中有一个使png背景透明的滤镜,JavaScript方法也是应用的这个滤镜实现png背景透明的。 写法:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../image/png_test.png’); 用法示例: .png{background:url(../image/png_test.png);} * html .png {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../image/png_test.png’);} 非IE6浏览器使用正常的background定位,IE6去除背景图片,应用png透明滤镜。 如果您的浏览器或内核为IE6,强烈建议 点击这里

IE6下png背景不透明——张鑫旭博客读书笔记

橙三吉。 提交于 2020-01-13 05:50:48
从今天开始跟着大牛张鑫旭的步伐,每天进步一点点 问题:IE6不支持png背景透明或半透明 一、可解决的方法 补充:css滤镜主要是用来实现图像的各种特殊效果。(了解) css滤镜的标识符是“filter”,总体的应用上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。css滤镜分类 CSS滤镜 可以直接作用于对象上,并且立即生效的滤镜称为基本滤镜。而要配合JavaScript等脚本语言,能产生更多变幻效果的则称为高级滤镜。 只有IE可以完全的支持滤镜,Firefox支持部分,其他内核的浏览器一律不支持。 更多关于滤镜的知识:http://www.cnblogs.com/shiyangxt/archive/2008/11/16/1334633.html 1. IE css 滤镜 IE css滤镜中有一个使png背景透明的滤镜,JavaScript方法也是应用的这个滤镜实现png背景透明的。 写法:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../image/png_test.png’); 用法示例: .png{background:url(../image/png_test.png);} * html .png {background:none; filter:progid

IE6 PNG 图片问题分析

一个人想着一个人 提交于 2020-01-12 17:49:54
背景:作为web前端的程序员都知道,许多需要使用png图片,但是目前仍然占据大部分市场的IE6却有着png图片背景不能透明的bug,下面分析一下: 目录: 一、可解决的方法 1. css滤镜 2. 老JavaScript方法 3. jQuery实现 4. flash实现 二、产生的问题 1. 响应单击事件 2. 图片大小控制 3. 背景图片的定位 三、相应的解决方法 1. 响应单击事件 2. 图片大小控制 3. 背景图片的定位 四、相关延伸的问题 1. png8与png24的半透明显示 2. IE7的半透明滤镜与png背景透明 五、小结 一、可解决的方法 1. IE css 滤镜 IE css滤镜中有一个使png背景透明的滤镜,JavaScript方法也是应用的这个滤镜实现png背景透明的。 写法: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../image/png_test.png’); 用法示例: .png{background:url(../image/png_test.png);} * html .png {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../image/png

jpg/jpeg/png格式的区别与应用场景

ε祈祈猫儿з 提交于 2019-12-03 13:35:14
注:在存储图像时采用JPG还是PNG主要依据图像上的 色彩层次和颜色数量 进行选择 一、.jpg/jpeg格式的图片(jpg全名:jpeg) JPG(或是JPEG): 优点:   (1) 占用内存小,网页加载速度快   (2)主要用于摄影作品或者写实作品(或者其他细节、 色彩丰富的图片)或大的背景图;对多色彩表现较好,不适于文字较多的图片 。根据我们在页面中使用的商品图片、采用人像或者实物素材制作的广告banner等图像更适合采用jpg的图片格式保存 缺点:    jpg格式图片是有损压缩的图片,有损压缩会使原图片数据质量下降,即jpg会在压缩图片时降低图片品质。 二、PNG格式的图片 .png: 优点:   (1) png格式图片是无损压缩的图片,能在保证最不失真的情况下尽可能压缩图像文件的大小。   (2) 图片质量高;色彩表现好;支持透明效果 ;提供锋利的线条和边缘,所以做出的logo等小图标效果会更好;更好地展示文字、颜色相近的图片。   (3)PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可存储多到16位的α通道数据。    (4) 所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片则需要采用PNG。 但也会有一些特殊情况, 例如有些图像尽管色彩层次丰富,但由于图片尺寸较小