实现全网置灰CSS3来解决

清颖~

2024-03-14 帮助3人

前言

当发生大事时，部分小伙伴会发现：“怎么某APP是灰的？不会是手机出问题了吗？” 然后再打开其他APP，发现：“都是灰的啊！明白了，看来是有大事发生……赶紧打开新闻看看”。

正文

那么，对于前端开发来说，什么效果不是用代码可以实现的呢？下面我们就灰色主题如何设置来研究一番。

网站示例

来看主站，这么设置一下，它就…就灰了呀！
学新通

其他网站也可以这么做。如淘宝手机端：

学新通

去掉之后，它又亮了，恢复如常（为了表明现在没啥大事，我还是恢复一下吧，万一误导各位。。）：

学新通

核心代码

其实核心就是：filter 属性！它是CSS3的新增属性，叫作“滤镜”。
CSS代码：filter: grayscale(100%);

html {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

grayscale(amount) 函数的官方解释是：将改变输入图像灰度。
amount是变量，它的值定义了转换的比例。值为 100% 则完全转为灰度图像，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘数。若未设置值，默认是 0。
js中可以这么设置: document.getElementById("myImg").style.WebkitFilter，参考如下代码可以尝试一下：

<!DOCTYPE html>
<html>
<body>

<p>点击按钮修改图片的颜色为黑白 (100% 灰度)。</p>

<button onclick="myFunction()">尝试一下</button><br>

<img id="myImg" src="https://blog.csdn.net/aaqingying/article/details/pineapple.jpg" alt="Pineapple" width="300" height="300">

<script>
function myFunction() {
    document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
}
</script>

</body>
</html>

原效果：
学新通
点击按钮后：

附：
在线尝试链接：https://www.runoob.com
更多使用方法：https://www.runoob.com/cssref/css3-pr-filter.html

这篇好文章是转载于：学新通技术网

实现全网置灰CSS3来解决

前言

正文

网站示例

核心代码

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

怎样阻止微信小程序自动打开

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐