你们谁有这个女生头像带字不带字的？

来源：蜘蛛抓取(WebSpider) 时间：2017-08-16 21:00 标签： qq头像女生背影带字
遮罩讲解_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
上传于||暂无简介
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩1页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢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
最近更新的内容div背景半透明 覆盖整个可视区域的遮罩层成效 - Web前端当前位置:& &&&div背景半透明 覆盖整个可视区域的遮罩层成效div背景半透明 覆盖整个可视区域的遮罩层成效&&网友分享于：&&浏览：94次div背景半透明 覆盖整个可视区域的遮罩层效果
文章转自/tech/arts/206262.html
&!DOCTYPE html&
&meta charset="gb2312" /&
背景半透明覆盖整个可视区域
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}
height:1000}
&p class="ph"&
place holder height:1000
&div class="mask opacity"&
&div class="content"&
背景半透明覆盖整个可视区域
这个效果效果在工作中经常会遇到，这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现，高手请绕道。
html代码很简单
&div class="mask opacity"&
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下显示的效果是我们所期望的，在其他浏览器中首屏以下的没能被遮盖住，为了兼容其他浏览器我们可以使用
来解决这个问题
完整的代码
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; }
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有

我要回帖

更多关于 qq头像女生背影带字 的文章

 

随机推荐