前言:
现在兄弟们对“cssfilterfirefox”都比较关心,各位老铁们都需要知道一些“cssfilterfirefox”的相关内容。那么小编在网摘上搜集了一些关于“cssfilterfirefox””的相关文章,希望朋友们能喜欢,小伙伴们快快来学习一下吧!是不是一晚上的时间,发现各大平台的网站页面都变成了灰色了,包括微信支付图标,那么如何让网站变成灰色呢?今天在代码中以一张简单的图片为示例。
【1】在代码中以一张简单图片为例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <img src="栈出.png"></body></html><style>
【1.2】网页效果图:
【2】在style里面添加样式代码:
<style> html { -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: grayscale(100%); /*firefox*/ -ms-filter: grayscale(100%); /*ie9*/ -o-filter: grayscale(100%); /*opera*/ filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter: gray; /*ie9- */ }</style>
【2.1】添加之后运行的页面效果图如下:
【2.3】 当然以上代码也可以添加在<html>标签里面,当作内联样式使用。
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);">
【3】知识点:
CSS3 filter(滤镜)grayscale(%):属性将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;因此:修改所有图片的颜色为黑白 (100% 灰度): -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); 以上是为了兼容不同浏览器
《完》
..
文章来源公众号:大前端学习之旅(ID:gh_eba7868fc67a)
版权声明:
本站文章均来自互联网搜集,如有侵犯您的权益,请联系我们删除,谢谢。
标签: #cssfilterfirefox