如何实现网页变灰

CV_CodeMan

已于 2023-02-21 16:13:47 修改

阅读量664

点赞数 1

分类专栏： html 文章标签： javascript 前端 html5

于 2022-12-05 11:01:05 首次发布

本文链接：https://blog.csdn.net/weixin_45357661/article/details/128182508

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

网页|如何实现网页变灰

应用场景
一般在清明节，全国哀悼日，大地震的日子，以及一些影响力很大的伟人逝世或纪念日的时候，身为站长的我们都会让自己的网站的全部网页变成灰色（黑白色），以表示我们对逝者的悼念。

功能实现的几种方法，可以调一种适合自己当前项目的进行使用

1.修改CSS文件

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

2.如果你不想改动CSS文件，通过在网页头部中的标签内部加入内联CSS代码的形式实现网站网页变灰

<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>

3.通过内联CSS代码实现网站页面变灰

<html style="filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">

4.vue全局变灰页面
通过在App.vue中的#app中加入以下代码

filter: grayscale(100%);
  -webkit-filter: grayscale(100%); /* webkit */
  -moz-filter: grayscale(100%); /*firefox*/
  -ms-filter: grayscale(100%); /*ie9*/
  -o-filter: grayscale(100%); /*opera*/
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  filter: gray; /*ie9- */

5.html中全局变灰页面

body *{
-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- */
}