八维名师讲述问题：半透明的遮罩层遮罩图片以后可以实现半透明的遮罩效果吗?　　八维名师指导—解决思路　　八维名师指出：因为根据遮罩层的特点，它是显示这个图层内形状的，对于这个形状里面的填充颜色它是不承认的，所以按照正常的制作思路是无法实现的。但是我们可以通过改变遮罩的另一个关键图层---被遮罩层的透明度来实现这个效果。　　1、运行Flash MX 2004，文档属性默认。2、单击文本工具在舞台中键入“《专家门诊》—清华大学出版社”，并分离使之成为矢量图形，设置混色器颜色，线性填充，左边黑色透明100%，右边黑色透明0%。3、 如何制作出具有透明感的遮罩效果呢?我们把思维方式反过来，遮罩层的文字我们不进行改变，把被遮罩层的透明度进行调整，看看能否实现我们想要的效果。4、 新建一个Flash MX 2004文档，属性默认。5、把图层1命名为“文字”，同样输入上述的文字，转化为图形元件。6、新建图层2，命名为“透明渐变”。在这个图层里面绘制一个从左至右逐渐渐变的矩形，朋友们可以参考上面的步骤。7、在文字层创建遮罩效果。如图6所示。　　注 意 ——当遮罩层与被遮罩层不对应的时候，在场景中是看不到遮罩层的形状的。提 示 ——因为遮罩层显露的是被遮罩层的内容，所以才可以实现这个效果。试一试 ——上一例中制作的时候渐显的遮罩效果，朋友们可以把被遮罩层的矩形元件反转过来，制作一个逐渐消失的遮罩效果。分 析——这种效果的实现其实和上一个问题的知识没有区别，只是增加了透明度，原理都是同样的。此例中的遮罩效果在Flash文字动画中经常可以看到，利用被遮罩层的速度、节奏的改变，在视觉上给人以冲击。从另一个角度来讲，这种效果也打破了文字渐显移动动画的局限性。下面是把“遮罩mc”拖动到舞台中，并创建遮罩效果。最终显露的遮罩效果只是场景中的效果。
楼主发言：1次 发图：0张 | 更多
请遵守言论规则，不得违反国家法律法规回复(Ctrl+Enter)div背景半透明，覆盖整个可视区域的遮罩层效果
作者：佚名
字体：[ ] 来源：互联网 时间：12-08 23:51:04
背景半透明，覆盖整个可视区域的遮罩层效果在工作中经常会遇到，这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现，高手请绕道
html代码很简单 &div class=&mask opacity&&&/div& 1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 2 、要覆盖整个可视区域通常的做法是: html,body{ height:100%} .mask{height:100%;width:100%;} 但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的，在其他浏览器中首屏以下的没能被遮盖住，为了兼容其他浏览器我们可以使用position: 来解决这个问题 完整的代码: &div class=&mask opacity&&&/div& html,body{ height:100%; margin:0; padding:0} .mask{height:100%; width:100%; position: _position: top:0; z-index:1000; } .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 一个实际的代码例子： 代码如下: &!DOCTYPE html& &html& &head& &meta charset="gb2312" /& &title&背景半透明覆盖整个可视区域&/title& &style& html,body{ height:100%; margin:0; padding:0; font-size:14} p{ line-height:18} .mask{height:100%; width:100%; position: _position: top:0; z-index:1000; } .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } .content{height:600 width:800 overflow: border:2px solid # background-color:# position: top:50%; left:50%; margin:-300px auto auto -400 z-index:1001; word-wrap: break- padding:3} .ph{ height:1000} &/style& &/head& &body& &p class="ph"&place holder height:1000&/p& &div class="mask opacity"&&/div& &div class="content"& &h1&背景半透明覆盖整个可视区域&/h1& &p& 这个效果效果在工作中经常会遇到，这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现，高手请绕道。 &/p& &p&html代码很简单 & d i v class="mask opacity"&& / d i v & &/p& &p& 1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码:
&code&.opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; }&/code& &/p& &p& 2 、要覆盖整个可视区域通常的做法是: &br/& &code& html,body{ height:100%} &/code& &br/& &code&.mask{height:100%;width:100%;}&/code& &br/& 但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的，在其他浏览器中首屏以下的没能被遮盖住，为了兼容其他浏览器我们可以使用&code&position: &/code&来解决这个问题 &/p& &p& &strong&完整的代码&/strong&: &pre& html,body{ height:100%; margin:0; padding:0} .mask{height:100%; width:100%; position: _position: top:0; z-index:1000; } .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } &/pre& &/p& &p& &strong&参考资料：&/strong& &a href="http://sofish.de/1916"&背景半透明最佳实践&/a& &a href="http://sofish.de/1909"&垂直居中的几种实现方法&/a& &a href="/code-snippets/html-css-code-snippets/1617.html"&DIV 高度100%&/a& &/p& &/div& &/body& &/html&
大家感兴趣的内容
12345678910
最近更新的内容半透明遮罩实现全屏幕遮盖css实现
来源：易贤网&& 阅读：5420 次&&日期：
温馨提示：易贤网小编为您整理了“半透明遮罩实现全屏幕遮盖css实现”,方便广大网友查阅！
*html body{height:100%}
z-index:100;
height:100%;
width:100%;
background:
opacity:0.4;
filter:alpha(opacity=40)
&div class=mask&&/div&
在ie67下如果不添加 *html body{height:100%} 地话有可能不起作用
更多信息请查看
更多信息请查看
【】&&&&&【点此处查询各地各类考试咨询QQ号码及交流群】
易贤网手机网站地址：
由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
相关阅读 & & &
&&& &nbsp&nbsp&nbsp会员注册
本站不参与评论！（）
自觉遵守：爱国、守法、自律、真实、文明的原则
尊重网上道德，遵守中华人民共和国各项有关法律法规
严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的评论
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
您在本站发表的评论，本站有权保留、转载、引用或者删除
参与本评论即表明您已经阅读并接受上述条款div背景半透明 覆盖整个可视区域的遮罩层效果
作者：佚名
字体：[ ] 来源：互联网 时间：10-30 11:05:11
背景半透明，覆盖整个可视区域的遮罩层效果在工作中经常会遇到，这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现，高手请绕道
html代码很简单 &div class=&mask opacity&&&/div& 1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 2 、要覆盖整个可视区域通常的做法是: html,body{ height:100%} .mask{height:100%;width:100%;} 但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的，在其他浏览器中首屏以下的没能被遮盖住，为了兼容其他浏览器我们可以使用position: 来解决这个问题 完整的代码: &div class=&mask opacity&&&/div& html,body{ height:100%; margin:0; padding:0} .mask{height:100%; width:100%; position: _position: top:0; z-index:1000; } .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 一个实际的代码例子： 代码如下: &!DOCTYPE html& &html& &head& &meta charset="gb2312" /& &title&背景半透明覆盖整个可视区域&/title& &style& html,body{ height:100%; margin:0; padding:0; font-size:14} p{ line-height:18} .mask{height:100%; width:100%; position: _position: top:0; z-index:1000; } .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } .content{height:600 width:800 overflow: border:2px solid # background-color:# position: top:50%; left:50%; margin:-300px auto auto -400 z-index:1001; word-wrap: break- padding:3} .ph{ height:1000} &/style& &/head& &body& &p class="ph"&place holder height:1000&/p& &div class="mask opacity"&&/div& &div class="content"& &h1&背景半透明覆盖整个可视区域&/h1& &p& 这个效果效果在工作中经常会遇到，这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现，高手请绕道。 &/p& &p&html代码很简单 & d i v class="mask opacity"&& / d i v & &/p& &p& 1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码:
&code&.opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; }&/code& &/p& &p& 2 、要覆盖整个可视区域通常的做法是: &br/& &code& html,body{ height:100%} &/code& &br/& &code&.mask{height:100%;width:100%;}&/code& &br/& 但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的，在其他浏览器中首屏以下的没能被遮盖住，为了兼容其他浏览器我们可以使用&code&position: &/code&来解决这个问题 &/p& &p& &strong&完整的代码&/strong&: &pre& html,body{ height:100%; margin:0; padding:0} .mask{height:100%; width:100%; position: _position: top:0; z-index:1000; } .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } &/pre& &/p& &/div& &/body& &/html&
大家感兴趣的内容
12345678910
最近更新的内容}