web页面点击整页变灰的效果

最新推荐文章于 2022-09-19 18:49:37 发布
最新推荐文章于 2022-09-19 18:49:37 发布
阅读量1.2k 收藏
点赞数
分类专栏： Div+Css 文章标签： web button firefox filter 测试 function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ITniao/article/details/3947062
版权

<html>



<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title> http://hi.csdn.net/YoungEngineer/profile </title>

</head>



<body style="margin:0;">

<div id="topCoverDiv" style="display:none;float:left;z-index:100;position:absolute;top:expression(this.offsetParent.scrollTop);left:expression(this.offsetParent.scrollLeft);width:100%;height:100%;filter:alpha(opacity=90);background-color:#888888;" oncontextmenu="return false;"><div style="z-index:101;position:absolute;top:200px;left:200px;width:200px;height:200px;background-color:#FFFFFF;"><input type=button value="取消页面灰掉" onclick="disableBodyArea(false);" /></div></div>



<div style="font-size:10pt;">

注1：灰掉页面<br/>



<br/> 

注：本页面仅在dreamwear下测试过。其它浏览器或其它版本未经测试。改进了一下，IE7下可以关闭了，firefox下还有些缺陷，页面超过一屏时，下边没有遮住。可以写脚本实现。<br/>        

</div>





<select><option >test</option></select>

<input type=button value="点击将页面灰掉" onclick="disableBodyArea(true);">

<br><br><br><br>

<br><br><br><br>

<select><option >test</option></select>

<br><br><br><br>

<br><br><br><br>

<select><option >test</option></select>

<select><option >test</option></select>



</body>



</html>

<script >

function disableBodyArea(f){

    document.getElementById('topCoverDiv').style.display = f? '':'none';

    var allSelects=document.getElementsByTagName("select");

    for(var i=0;i<allSelects.length;i++) {

        allSelects[i].disabled=f;

    }

}



</script>

ITniao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端入门到实战：网页变灰蒙灰CSS样式总汇
前端工程师年薪30万，就靠这套教程！持续更新最新知识
05-04 468
每次全国哀悼日，各大网站首页都变成了灰色，添加以下全局CSS样式，可以实现此效果： 方法一 html { -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);} <!-- 可以是整个网站变成灰色的 --> 方法二 html { fil...
简洁灰色的全球企业网站模板_灰色 国际 企业 英文 简单 整站 按钮 web20_html网站模板_网页源码移动端前端.rar
最新发布
08-06
总之，这个压缩包提供了一个专业且用户友好的英文企业网站解决方案，结合了现代网页技术，如Web2.0设计理念，以及对移动端的优化，使得搭建和维护企业网站变得更加便捷高效。无论是初创公司还是已有企业，都能从中...
CSS 页面置灰等待效果
写博客只为学习
06-01 227
[code="html"] [/code] [code="css"] .tms-load-box{ display:inline-block; border: 2px solid #A1C5F7; padding: 13px 20px; background:#fff; position:fixed; z-inde...
如何用一行代码实现网页变灰效果？
墨鱼菜鸡
09-09 745
转自进击的Coder，作者崔庆才 今天是 2020 年 4 月 4 日，星期六，清明节。 我们的国家经历了非常惨痛的时刻，很多英雄在救助他人的路上倒下，更有很多烈士英雄保卫人民的安危遇难，今天全国下降半旗，北京时间 10 点全国默哀三分钟，来致敬英雄们。同时今天一切公共娱乐活动也都会停止，包括直播、综艺、影视、游戏等等。 我也在这里也向全...
页面整体灰掉，社会重大事件页面色彩控制分析
zha_zi的专栏
05-05 393
概率是比较小的可能我能想起的这么多年的重大国家悼念事件也就这两起，或者另外一种一种情况，在一个网站内部纪念一个人的主页，例如 这个一个著名慈善人物，这里为他默哀一下，一个了不起的人，百度为了纪念他的去世，把他的词条设置成了灰色，这是一种哀思，我们如何网页中实现这种技术？   CSS 滤镜 实现这种效果的 方式我想应该不只是一种，这里我们介绍一种实现方式css 滤镜”filter“，这个属性也是css3的一个新特性，如果希望在低版本的IE下实现这种效果可能 以下是百度的实现代码 html{
如何让页面灰掉？
m0_67743353的博客
09-19 589
方法一：CSS文件 我们可以在网页的CSS文件中添加以下的CSS代码，来实现网页黑白色，也就是网站变灰。 CSS代码： html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); } 方法二：在网页的<head>标签内加入内联CSS代码 如果你不想改动CSS文件，你可以通过在网页头部中的&l
简洁灰色的全球企业网站模板_灰色 国际 企业 英文 简单 整站 按钮 web20.zip
02-21
该压缩包文件“简洁灰色的全球企业网站模板_灰色 国际 企业 英文 简单 整站 按钮 web20.zip”包含了一套设计精良、适用于全球企业的网站模板，其主要特点体现在以下几个方面： 1. **颜色设计**：模板采用灰色调，...
ASP.NET頁面遮罩實例，整個頁面變灰
09-02
ASP.NET是一种广泛使用的Web...总的来说，通过ASP.NET和JavaScript的结合，你可以轻松地创建一个“整個頁面變灰”的遮罩效果，提供更好的用户交互体验。记得在实际项目中根据具体需求调整代码，以满足各种复杂的场景。
学校实训项目-灰色简洁漂亮的音乐学校网站.zip
08-31
在音乐学校网站中，前端开发不仅关乎视觉美观，还关乎用户体验，如按钮点击效果、滑动导航等动态效果。 4. **响应式设计**：考虑到不同设备的屏幕尺寸和分辨率，响应式设计是现代网站不可或缺的一部分。在这个音乐...
网站场景切换网站模板
04-02
"整站"标签提示我们，这是一个适用于整个网站的模板，它不仅包含首页的设计，还覆盖了内页和其他关键页面。这意味着模板具有高度的可定制性和适应性，可以满足不同类型的网站需求，无论是商业网站、个人博客还是企业...
网页整体页面变灰代码
weixin_30737363的博客
05-20 120
CSS灰度滤镜 filter:Gray; 要使整页变灰，只需要在 body 部分修改为： <body style="filter:Gray;"> 页面变灰代码在CSS文件中， 添加以下内容，请注意复制后用改为半角符号 html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); ...
网页是怎么变灰的？今日Web要求：所有网页变成灰色。
qq_35581156的博客
04-04 6687
为逝者默哀。向勇士们致敬。 天下兴亡，匹夫有责。身无一技之长，我很愧疚。 如何让所有的页面全都化成灰色的沉重：filter 我们浏览的网页是怎么变灰的呢？只需要下方一行代码即可换成灰色。 html{ -webkit-filter: grayscale(100%); filter: grayscale(100%); } 当然如果谁家网站有 一键换肤，那我只能说：高级，请一键换色。 但是，如果...
弹出div层，简易，周围变灰
一七得七
11-18 2869
原链接：http://blog.csdn.net/kouwoo/article/details/43149213 点击之后，原页面变灰，并弹出一个div层显示bulabula内容 变灰的实现：加一个jQuery 遮罩    具体代码： 弹出DIV body { font-family: Aria
JS弹出一个网页对话框，后面全变灰，并不可用
R.H.Jiang的专栏
11-15 4911
html>head>title>JS弹出一个网页对话框，后面全变灰，并不可用。title>meta http-equiv="Content-Type" content="text/html; charset=gb2312" />style type="text/css">*{margin:0;padding:0;}style>head>body>JS弹出一个网页对话框，后面全变灰，并不可用。思路：
移动端网站或APP点击后出现闪动或灰色背景
weixin_30279315的博客
08-14 360
隐藏文本框阴影 input, textarea{-webkit-appearance: @none;} 取消手机点击屏幕时，会出现的灰块 html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} 　 移动端网站或APP点击后出现闪动或灰色背景 只需对...
asp.net下JS弹出系统对话框是白色或者页面错乱
Priate
06-01 467
asp.net下JS弹出系统对话框是白色或者页面错乱 估计你使用的下面这个方式弹出来的： Response.Write(" alert('弹出提示') ");这种方法。 改成：                if (ClientScript.IsStartupScriptRegistered("SuccessAlert"))                 {
网页页面置灰操作
DuHacker的博客
08-03 4536
多的不说，直接代码，增加键盘使用寿命html,body,div,img{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值