【CSS3】CSS实现页面样式变灰色

现实需求中经常遇到例如代金券或者物品被使用后要变灰色代表已使用。

普通思路是需要设置两套样式及图片进行更换以达到效果。

经过了解发现CSS3中的filter属性可是快速实现将块元素灰度化的效果。

代码贴上：（代码中的兼容样式可根据需求自行变更）

.gray {     
	-webkit-filter: grayscale(100%);   
	-moz-filter: grayscale(100%);  
	-ms-filter: grayscale(100%);   
	-o-filter: grayscale(100%);     
	filter: grayscale(100%); 	     

	filter: gray; 
}

效果展示：

原效果：

灰度化后的效果：

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 【CSS3】移动端自适应单位-vh、vw计量单位
• 下一篇： 【apicloud】IOS苹果iap内购价位表