通用网站置灰-兼容ie的做法

pingmin_1001

于 2023-02-13 15:01:31 发布

阅读量283

点赞数

文章标签：前端 javascript html Powered by 金山文档

本文链接：https://blog.csdn.net/pinhmin/article/details/129009178

版权

本文主要介绍了通用网站置灰样式及兼容ie的做法。

页面布局格式：

<body>
    <div id="layout">
        内容代码开始
    </div>
</body>

通用置灰样式：

#layout{
  filter: gray !important;
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
}
p,input,span,li,a,i,em{
  filter: gray !important;
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%); 
}

兼容ie9及以下的做法：

<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
/**把IE=Edge改为IE=9，强制使用ie9**/
<meta http-equiv="X-UA-Compatible" content="IE=9" >

注意：

建议背景样式定义在layout，不要直接定义在body上，不然ie下，背景置灰可能会没生效。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

pingmin_1001

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通用网站置灰-兼容ie的做法

本文主要介绍了通用网站置灰样式及兼容ie的做法。
复制链接

扫一扫

使网页变灰，支持IE、FireFox、Opera、360浏览器等

03-29

NULL 博文链接：https://sharejava.iteye.com/blog/1293475

网页变灰的方法，兼容 IE Edge Chrome Firefox

shaowl111的专栏

04-05

2650

1、在所有页面公用的CSS中加入： html { -webkit-filter: grayscale(100%); } 2、加上上述代码之后，chrome、firefox等都可以看到效果，但在IE浏览器中可能无法看到效果，可能是因为你的网页没有限定网页标准协议，请加上如下代码： <!DOCTYPE html PUBLIC "-//W...

参与评论您还未登录，请先登录后发表或查看评论

网页置灰的方法（兼容IE）

thankseveryday的专栏

12-04

1148

通过 css 滤镜可以非常方便的给网页完成置灰。 HTML 添加一个统一的滤镜即可。但为了兼容 IE，就需要借助插件。如果需要保留特殊元素不被置灰，那就使用选择器：其它的几种置灰方式：使用 SVG 滤镜使用 backdrop-filter 实现首屏置灰遮罩借助混合模式实现网站置灰但是，IE 对以上方式无效借助插件：注意，这里又是为了兼容性，最好使用 jquery，用选择器的时候能免去不少麻烦。cd…

让整个网站网页变灰的方法

cspandadn的博客

12-02

322

网站网页变灰的方法，一行CSS代码实现网页变灰

h5页面置灰处理源代码，兼容IE（优雅降级提供下载浏览器链接）

jason_renyu的博客

04-03

1774

h5页面置灰处理源代码兼容IE（优雅降级提供下载浏览器链接）马上要到清明节了，有朋友找我要给页面置灰的方案和方法，在网上搜的方法基本都是在Chrome上直接置灰，在ie上就有点难处理了；我找了下之前在南京遇到公祭日时候，做过类似的操作，为了方便当时用原生js写了一个，这样的好处是不依赖jq之类的，需要时候引入不需要时候废弃就行。对与IE的兼容，我们做的是优雅降级，在IE的时候提示让用户去下载...

vue-print-nb 兼容低版本浏览器

11-28

首先，通过 `import` 语句引入了插件的umd（通用模块定义）版本，这是一个兼容多种模块加载方式的打包格式，确保在不支持ES6模块的环境中也能运行。然后，通过 `Vue.use(Print)` 这一行代码，将插件注册到Vue实例中...

CSS 完美兼容IE6/IE7/FF的通用hack方法

12-09

一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !...2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.<style>#wrapper{#wrapper {

IE与FireFox的兼容性问题分析

12-10

window.event IE：有window.event对象 FF：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event) 鼠标当前坐标 IE：event.x和event.y。 FF：event.pageX和event.pageY。...

CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法

10-30

本文主要探讨如何使用CSS Hack来实现CSS在IE6、IE7和Firefox之间的完美兼容。首先，我们来看两种基本的CSS Hack方法： 1. `!important` Hack `!important` 规则用于提高CSS声明的优先级。在IE7及更新版本中，它...

无忧中英繁企业网站通用版-Asp

06-12

欢迎使用无忧中英繁企业网站通用版，本地IIS环境有些功能不能支持，建议在线测试请将整个程序包上传到空间根目录下运行，登录后台管理需要浏览器支持为IE10.0以上或者兼容的浏览器如火狐。后台管理：您的域名/...

图片或页面置灰（兼容IE10,11）

凌晨不睡觉

08-12

1815

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do

【记录】网站变灰色怎么实现？

小确幸的博客

12-08

2260

网站的主页及内容也都变成了灰色，包括按钮、图片等，这是怎么做到的呢？在此记录一下。

filter滤镜实现网页置灰（纪念日）效果

qq_42961150的博客

01-30

5401

一些特殊纪念日的时候，很多网站的首页进行置灰处理。这种效果实际上是用滤镜filter实现的，几行css就可以实现。在实现整个页面置灰的过程中，要注意页面中有定位的元素，就需要将css设置在html上面，否则定位就会出现错乱的现象，具体在下面的代码中讲解。

css页面变灰度filter兼容ie、firefox、chrome、opera、safari实现样式

細水、長流√的专栏

04-22

1933

html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); _filter:none; } //来源于百度百科样式.

网页变灰的方法，适用于IE

ma_pei的博客

04-07

3113

在哀悼日的时候如何让网页变灰？ 1、适用于谷歌、火狐、360极速模式的代码 html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); ...

前端页面全局变灰，兼容IE、Chrome

只会div的博客

04-03

2276

设置前端页面全局变为灰色 setGlobalBackgroundGray() function setGlobalBackgroundGray(){ var style = document.createElement("style"); style.type = "text/css"; style.appendChild(document.createTextNode("html{f...

CSS filter与前端滤镜修改网站为(黑白)灰色代码

林中明月间丶

04-07

979

链接：https://zhuanlan.zhihu.com/p/125137964 2020.04.04 很多网站都换成了灰色调，如淘宝百度掘金知乎等，通过实地考察，灰度的技术无一例外都使用了以下CSS，如淘宝的： html { -webkit-filter: grayscale(100%); filter: progid:DXImageTransform.Micro...

html5图片灰度显示,实现各浏览器html图像灰度跨浏览器图像灰度(grayscale)解决方案...

weixin_34587189的博客

06-04

1344

实现图像灰度(grayscale)最初有ie6推出的专属属性filter实现，后来在css3里w3c实现了标准的filter，但是在不同浏览器的实现程度不一样，因此需要一种浏览器兼容的解决方案。IE私有滤镜的方式：自IE4开始，IE引入了私有滤镜，可以实现透明度、模糊、阴影、发光等效果，当然也可以实现灰度图像效果。代码如下：img {filter: gray; /* just for IE6-9 ...

WEB前端开发面试题集锦.doc

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交