当前位置:首页 > 前端技术 > html中设置网站全局颜色为黑白

html中设置网站全局颜色为黑白

2022年09月16日 19:46:32前端技术6

html中设置网站全局颜色为黑白
html中设置网站全局颜色为黑白 _ JavaClub全栈架构师技术笔记
Elements,html中添加

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

html中设置网站全局颜色为黑白 _ JavaClub全栈架构师技术笔记

屏蔽IE10、11版,且支持弹窗版

	<!-- 特殊日子浏览器 全站灰色 -->
    <style>
    html {
     
        filter gray !important;
        filter progidDXImageTransform.Microsoft.BasicImage(grayscale=1);
        filter grayscale(100%);
        -webkit-filter grayscale(100%);
        -moz-filter grayscale(100%);
        -ms-filter grayscale(100%);
        -o-filter grayscale(100%); 
    }
    </style>
    <script>
      function IEVersion() {
     
        var userAgent = navigator.userAgent; 取得浏览器的userAgent字符串
        var isIE = userAgent.indexOf(compatible)  -1 && userAgent.indexOf(MSIE)  -1; 判断是否IE11浏览器
        var isEdge = userAgent.indexOf(Edge)  -1 && !isIE; 判断是否IE的Edge浏览器
        var isIE11 = userAgent.indexOf('Trident')  -1 && userAgent.indexOf(rv11.0)  -1;
        if(isIE) {
     
          var reIE = new RegExp(MSIE (d+.d+););
          reIE.test(userAgent);
          var fIEVersion = parseFloat(RegExp[$1]);
          if(fIEVersion == 7) {
     
            return 7;
          } else if(fIEVersion == 8) {
     
            return 8;
          } else if(fIEVersion == 9) {
     
            return 9;
          } else if(fIEVersion == 10) {
     
            return 10;
          } else {
     
            return 6;IE版本=7
          }
        } else if(isEdge) {
     
          return 20;edge
        } else if(isIE11) {
     
          return 11; IE11
        }else{
     
          return -1;不是ie浏览器
        }
      }
      var version = IEVersion();
      if(version !== -1 && version = 10){
     
        setTimeout(function () {
     
          document.body.innerHTML = 'div style=text-align center;padding-top 20%;font-weight bold请采用其他浏览器访问,以保证本系统正常使用div'
        },1500)
      }else if(version == 11) {
     
          setTimeout(function () {
     
              document.body.innerHTML = 'div style=text-align center;padding-top 20%;font-weight bold请采用其他浏览器访问,以保证本系统正常使用div'
         },1500)
      }
    </script>
    <!-- 特殊日子浏览器 全站灰色 -->

网上搜的多功能设置灰色
还有定时器设置灰色

作者:莉兹Liz
来源链接:https://blog.csdn.net/qq_40138556/article/details/105298546

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42286.html

分享给朋友:

“html中设置网站全局颜色为黑白” 的相关文章

HTML5结构标签

GUIDM在这里祝大家节日快乐! 博主有话说:如果有描述错误之处请大家纠正。让我们可以一起学习一起进步。 个人主页:GUIDM的主页 内容专栏:HTML5干货系列 此块内容为纯纯的干货,略显乏味枯燥,是笔记向的blog。如果觉得还不错,希...

HTML5 速查列表

HTML 速查列表 HTML 速查列表. 你可以打印它,以备日常使用。 HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题<...

HTML框架结构标签(frameset)

HTML框架结构标签(frameset)

第一次了解到竟然还有HTML框架结构标签()。为此小编在实例中应用了一下,但是在搭建框架之初就遇到 了问题。为此总结本博客,以便大家能及时解决问题。 什么是HTML框架结构标签(<frameset>)...

HTML5 自动聚焦autofocus属性

原文:https://davidwalsh.name/autofocus 翻译:http://blog.csdn.net/renfufei/article/details/9797419   HTML5 推出了一大堆精彩的东西给我们。 过去我们要...

html标签汇总

html标签汇总

文章目录 段落处理 图像标签 超链接 注释 特殊字符 表格 列表标签 无序列表 有序列表 自定义列表...

HTML标签及其属性

一、Google访问socket服务端 1 import socket 2 3 def socket_server(): 4 sk = socket.socket(socket.AF_INET,socket.SOCK_STREAM)...

HTML5 video 视频标签使用介绍

HTML <video> 适用于HTML 5+,用于定义在线观看的视频流媒体。 <video width="320" height="240" src="movie.ogg" controls="controls"> 这里是注释文字,如果无法...

HTML - 标签自定义属性

HTML - 标签自定义属性

html标签中,除了标准的属性名外,还可以自定义属性名(属性值为String类型),下面看下两种自定义属性的使用 1.自定义属性名 <body> <button desc="this is a button">Click me!</b...

HTML5相关标签及标签属性

1、新增语义化标签 <header></header> 头部 <nav></nav> 导航 <section></section> 章节、段落 <arti...

HTML Label标签使用

HTML Label标签使用

转载 from :https://blog.csdn.net/gnail_oug/article/details/72852150 label标签介绍 label标签为input元素定义标注(标记),它不会向用户呈现任何特殊效果,和span标签类似。但label标签和...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。