当前第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怎么固定底部不动
css如何改变文本框颜色
聊聊你可能不了解的css属性函数 attr()
怎么保存css
css animation-delay属性怎么用
css怎么让盒子并排显示
网页中最基本的元素是什么
background-repeat属性怎么用
推荐一个chrome devtools实用小插件：css overview panel
css怎样设置按钮不能点击
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css实现将网页变成黑白色
