当前第2页 返回上一页
先编写svg文件
1 2 3 4 5 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<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>
|
css调用
1 | filter: url(gray.svg#grayscale);
|
3、js遍历
直接插入代码就好啦，能白嫖是不可能手写的（ps：用rgba和!important的无法改变，其他未实验）
1 | <script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>
|
js源不太好，会导致网页加载过慢，可手动下载到本地grayscale.js（点开之后F12，切换到Network标签，刷新网页会出现一个文件，右键save as）
然后用js或者jq调用
1 2 3 4 | grayscale(document.getElementById("thisImage"));
grayscale($("#thisImage"));
|
推荐教程：css快速入门
以上就是css实现将网页变成黑白色的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
css怎么去掉a的下划线
css ellipsis不起作用怎么办
css怎么隐藏元素但保留位置
css如何设置渐变色
css怎么实现图片居中
css如何使用伪元素清除浮动
css怎么给文字添加边框或字体放大效果（代码详解）
css字符间距怎么设置
css怎么让图片不变形
css为什么不能正常加载
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css实现将网页变成黑白色
