让背景如此暗淡（一种弹出提示信息时页面背景色调改变的方法）

2016-02-19 12:02 22 1 收藏

人生本是一个不断学习的过程，在这个过程中，图老师就是你们的好帮手，下面分享的让背景如此暗淡（一种弹出提示信息时页面背景色调改变的方法）懂设计的网友们快点来了解吧！

【 tulaoshi.com - Web开发】

这个效果前些日子有人在论坛问起，今天有空研究了下。我打了原创标记，因为我在写这个方法时的确没有参考过别人的代码。我的方法其实就是层遮罩加ALPHA滤镜实现预期效果。

<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>提示信息框</title> <style type="text/css"> a{ color:#000; font-size:12px;text-decoration:none} a:hover{ color:#900; text-decoration:underline} body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); overflow:hidden} #massage_box{ position:absolute;  left:expression((body.clientWidth-350)/2); top:expression((body.clientHeight-200)/2); width:350px; height:200px;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2); z-index:2; visibility:hidden} #mask{ position:absolute; top:0; left:0; width:expression(body.clientWidth); height:expression(body.clientHeight); background:#666; filter:ALPHA(opacity=60); z-index:1; visibility:hidden} .massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%} .header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff} </style> </head><body>  本站提示信息 ×  本人申明此博客所有文章（包括文章插图）均为原创，如需引用或转载请注明出处。  欢迎大家对博文中观点留言评述，谢绝无聊人士无素质无观点的灌水漫骂。本站已设背景音乐，听音乐盒中收集的音乐时请先到页面底部关闭背景音乐。  显示提示信息 </body> </html>

拖动消息框

<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>提示信息框</title> <style type="text/css"> a{ color:#000; font-size:12px;text-decoration:none} a:hover{ color:#900; text-decoration:underline} body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); overflow:hidden} #massage_box{ position:absolute;  left:expression((body.clientWidth-350)/2); top:expression((body.clientHeight-200)/2); width:350px; height:200px;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2); z-index:2; visibility:hidden} #mask{ position:absolute; top:0; left:0; width:expression(body.clientWidth); height:expression(body.clientHeight); background:#666; filter:ALPHA(opacity=60); z-index:1; visibility:hidden} .massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%} .header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff} </style>   </head><body>  本站提示信息 ×  本人申明此博客所有文章（包括文章插图）均为原创，如需引用或转载请注明出处。  欢迎大家对博文中观点留言评述，谢绝无聊人士无素质无观点的灌水漫骂。本站已设背景音乐，听音乐盒中收集的音乐时请先到页面底部关闭背景音乐。  显示提示信息 </body> </html>

那为什么不能自适应高度？不是可以取页面高度吗？为什么不用这个呢
用scrollWidth和scrollHeight吧

<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>提示信息框</title> <style type="text/css"> a{ color:#000; font-size:12px;text-decoration:none} a:hover{ color:#900; text-decoration:underline} body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); overflow:hidden} #massage_box{ position:absolute;  left:expression((body.clientWidth-350)/2); top:expression((body.clientHeight-200)/2); width:350px; height:200px;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2); z-index:2; visibility:hidden} #mask{ position:absolute; top:0; left:0; width:expression(body.scrollWidth); height:expression(body.scrollHeight); background:#666; filter:ALPHA(opacity=60); z-index:1; visibility:hidden} .massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%} .header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff} </style>   </head><body>  本站提示信息 ×  本人申明此博客所有文章（包括文章插图）均为原创，如需引用或转载请注明出处。  欢迎大家对博文中观点留言评述，谢绝无聊人士无素质无观点的灌水漫骂。本站已设背景音乐，听音乐盒中收集的音乐时请先到页面底部关闭背景音乐。  显示提示信息 bottom here </body> </html>

来源:https://www.tulaoshi.com/n/20160219/1599572.html

上一篇：从笑着妒忌到哭着羡慕 - QQ情侣分组
下一篇：再美也是昙花一现 - QQ情侣分组

看过《让背景如此暗淡（一种弹出提示信息时页面背景色调改变的方法）》的人还看了以下文章更多>>

电脑的背景色选择什么颜色最好

电脑的背景色选择什么颜色最好在这个电子产品充斥着生活的各个角落的年代，电脑成了每个人的生活必需品。很多白领更是每天长时间的面对电脑，让电脑带来的伤害更深。在离不开电脑的同时我们应该采取些什么措施来减少电脑带来的伤害呢? 红色是最刺激眼睛的颜色，如果电脑的背景色为红色，久看后会出现眼睛疲劳，胀痛甚至的流泪...

白色作为背景色简约漂亮的网站

标签： Web开发

当你想到白色的时候，你的脑海中会出现什么？白色是最简单、优雅、平和的色彩。在网页设计中使用白色常见于很多博客、在线作品集、电子商务和其它类型的网站中。白颜色也主要用于字体颜色、背景色、链接颜色、图片及更多地方。尽管如此，如果你认为白色系网站对用户没有吸引力，那就大错特错了，你会震惊的网上的一些最棒的网站用的是白色...

巧用绘图工具为文档添加背景色

标签：电脑入门

很多文字工作者，长期在电脑前打字，面对一成不变的白纸黑字，不仅容易产生审美疲劳，更使我们心灵的窗户很受伤。能否为文档设置不同的背景色，从而缓解我们眼睛的疲劳呢? 其实，WPS2007已经为我们提供了蓝底白字功能：从工具菜单中选择选项，并在其中的常规与保存选项卡中选中蓝底白字(图1)，原本刺眼的白色页面变成了蓝色，而原本黑色的文字...

CAD背景色怎么设置成黑色？

标签： cad教程 autocad教程 CAD

CAD背景色怎么设置成黑色？初次安装的CAD背景是白色的如何把背景设置成传统的黑色呢? 1、打开CAD进入初始界面。 2、单击右下角的初始设置空间选择autoCAD经典。 3、关闭做界面选项(如图)。 4、单击工具选择选项。 5、单击显示选择颜色选项。 6、选择颜色的下拉菜单选中黑色，点击应...

VB调用API制作渐变的窗口背景色

标签：编程语言网络编程

在许多Windows软件的安装程序中，时常可以看到以某种颜色由浅至深的渐变为背景的窗口。使用VB制作这类窗口的方法有不少，而通过调用API函数绘制渐变的窗口背景色，似乎是一种既简单又节省资源的方法。首先，在module文件中加入下列声明语句： Declare Function CreateSolidBrush Lib"GDI"(ByVal _crColor As Lon...

查看更多精彩>>