首页 前端知识 如何实现网页变灰

如何实现网页变灰

2024-06-10 11:06:53 前端知识 前端哥 51 231 我要收藏

网页|如何实现网页变灰

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

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

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- */
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/11716.html
标签
评论
发布的文章

第一次实验补充

2024-06-18 09:06:14

html5shiv,从入门到深入

2024-05-09 10:05:07

html5基础入门

2024-06-18 09:06:07

HTML5学习简记

2024-06-18 09:06:20

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!