【3分钟技能get】网站色调灰度 & JSON.parse建议

栏目: IT技术 · 发布时间: 4年前

内容简介:碎片化时间如何利用?几分钟get常用技能点!这次分享两个小知识点:4月4日,沉痛悼念逝去的同胞,各大网站基本都下掉了娱乐板块,并且网站色调调整为灰色。

碎片化时间如何利用?几分钟get常用技能点!

这次分享两个小知识点: CSS3的filter滤镜 以及 JSON.parse 使用小建议。

1:实现网站的灰度

4月4日,沉痛悼念逝去的同胞,各大网站基本都下掉了娱乐板块,并且网站色调调整为灰色。

【3分钟技能get】网站色调灰度 & JSON.parse建议

怎么实现的呢?全部图片以及文本背景色设置为灰色?这样的话成本是巨大的。其实只需要加上一行css即可:

filter: grayscale(100%);

ps:可以找个网站看下效果,给html元素加上上述代码即可。

至于兼容性,对于不支持filter的浏览器,有两种解决方案:

1)使用SVG( 可缩放矢量图形

举例:在SVG中声明滤镜:

<svg xmlns="http://www.w3.org/2000/svg" width=0 height=0>
 //<filter>标签用来定义SVG滤镜;id属性可为滤镜定义一个唯一的名称
 <filter id="grayscale">  
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>  
 </filter>  
</svg>

如何使用:(利用了 url() 属性)

img{
    //用来把元素链接到滤镜。当链接滤镜id锚点时,必须使用#字符
    filter:url('#grayscale');
    //当然也可以使用DataUrl将其内联到url
}

Tips:当然也可以使用 DataUrl 将svg内联到url中

img{
    filter:url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale")
}

2)JS实现

这里有个实现案例,有需要自行研究: https://j11y.io/demos/graysca...

fiter常用属性:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() ;

这里举个例子: filter:blur(15px) 的使用效果:

【3分钟技能get】网站色调灰度 & JSON.parse建议

2.JSON反序列化建议

有些童鞋可能习惯使用下面的写法:

//假设flag获得的是被序列化后的值
let flag = 'true'; 
JSON.parse(flag) ? 1 :2;

虽然上例的影响微乎其微,但好的编程习惯从小处做起,推荐下面写法:

flag === 'true' ? 1 : 2;

时间就像海绵,挤挤总会有的; 【3分钟技能get系列】 丰富你的碎片化时间~

更多技术分享,欢迎【扫码关注】~

【3分钟技能get】网站色调灰度 & JSON.parse建议


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

互联网思维独孤九剑

互联网思维独孤九剑

赵大伟 / 机械工业出版社 / 2014-3-20 / 49

《互联网思维独孤九剑》是国内第一部系统阐述互联网思维的著作,用9大互联网思维:用户思维、简约思维、极致思维、迭代思维、流量思维、社会化思维、大数据思维、平台思维、跨界思维,以专业的视角全方位解读移动互联网给传统产业带来的变革,涉及战略规划、商业模式设计、品牌建设、产品研发、营销推广、组织转型、文化变革等企业经营价值链条的各个方面。这是一部传统企业互联网转型必读的“孙子兵法”,帮助我们开启对新商业文......一起来看看 《互联网思维独孤九剑》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码