您的位置 首页 css教程

css实现将网页变成黑白色

将整个网页全局变色有三种方法,分别是:css直接设置,添加svg滤镜,通过js遍历所有标签更改颜色。

1、css直接设置

直接编辑样式,然后在需要应用的地方设置class

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

(视频教程:css视频教程)

2、svg

先编写svg文件

<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调用

filter: url(gray.svg#grayscale);

3、js遍历

直接插入代码就好啦,能白嫖是不可能手写的(ps:用rgba和!important的无法改变,其他未实验)

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>

js源不太好,会导致网页加载过慢,可手动下载到本地grayscale.js(点开之后F12,切换到Network标签,刷新网页会出现一个文件,右键save as)

然后用js或者jq调用

/*js调用*/grayscale(document.getElementById("thisImage"));/*jq调用*/grayscale($("#thisImage"));

文章来源:火云技术网

文章标题:css实现将网页变成黑白色

文章地址:https://www.pyhw.net/30093_css%e5%ae%9e%e7%8e%b0%e5%b0%86%e7%bd%91%e9%a1%b5%e5%8f%98%e6%88%90%e9%bb%91%e7%99%bd%e8%89%b2-2.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

8条评论

  1. If you want to use the photo it would also be good to check with the artist beforehand in case it is subject to copyright. Best wishes. Aaren Reggis Sela

  2. Go to the right kind of show and you can really build the estimation of your association and make superb leads. Jacynth Christy Nazler

  3. Birçok aday merak etmektedir sitesi sayesinde artık yks 2022 tyt ayt konularına,güncel tyt ayt konuları göz gezdirebilirsiniz.www.yksblogun.com

网站地图