DIV+CSS（网页遮罩效果）

最新推荐文章于 2024-05-30 16:48:43 发布
最新推荐文章于 2024-05-30 16:48:43 发布
阅读量1.8k 收藏
点赞数
分类专栏： 前端
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <style type="text/css">  
  6.     #poplayer  
  7.     {  
  8.         position:absolute;  
  9.         top:100px;  
  10.         left:400px;  
  11.         width:300px;  
  12.         height:200px;  
  13.         z-index:8888;  
  14.         background-color:#9CAAC1;  
  15.     }  
  16.     #covered  
  17.     {  
  18.         position:fixed;  
  19.         _position:absolute  
  20.         z-index:888;  
  21.         top:0px;  
  22.         left:0px;  
  23.         width:100%;  
  24.         height:100%;  
  25.         background-color:Black;  
  26.           
  27.         opacity:0.3;  
  28.     }  
  29.           
  30.     </style>  
  31. </head>  
  32. <body>  
  33.     <input type="text" value="底层" />  
  34.     <div id="covered">  
  35.     </div>  
  36.     <div id="poplayer">  
  37.         <input type="text" value="弹出层" />  
  38.     </div>  
  39. </body>  

  1. </html>  
转载来自：http://blog.csdn.net/haifengzhilian/article/details/8200757

放肆青春的博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现网页遮罩效果
05-03
用JavaScript实现的网页遮罩效果，使用了单例保障只创建唯一的遮罩，运用了JavaScript面向对象编程
Div+Css实现屏蔽效果
12-09
【遮罩层的大小】1、用JS判断你的显示器分辨率，获取长与宽两个参数，将这两个参数赋给第二层的Div，作为他的长与宽的像素值，这样的话，无论在多大或多小的显示器上，都可以显示同样的效果 2、CSS样式表：这种方法...
DIV CSS遮罩层
李斌的BLOG
12-28 732
DIV CSS遮罩层 function showdiv() { document.getElementById("bg").style.display ="block"; document.getElementById("show").style.display ="block"; } function h
css属性mask遮罩
最新发布
bingmoujs的博客
05-30 412
可以设置 alpha（默认）表示使用遮罩图像的 alpha 通道，或者 luminance 表示使用遮罩图像的亮度。可以设置 repeat（默认）、no-repeat、repeat-x、repeat-y 等。: 定义遮罩的起始位置。可以设置 border-box（默认）、padding-box 或 content-box。: 定义遮罩的位置。可以设置具体的水平和垂直定位值，也可以使用关键字 center 居中对齐。可以设置具体的宽度和高度值，也可以使用关键字 auto 自动缩放。: 定义要用作遮罩的图像。
div+css实现这遮罩层
weixin_42125762的博客
10-12 1102
遮罩层的实现 给父级a相对定位，子级b绝对定位。b基于父级a进行绝对定位，与a重合，脱离文档流展示在最上层。 <div class="a" id="a"> <img src="img/beijingdy.jpg"> <!--遮罩层开始--> <div class="b" id="b"> <p>遮罩层</p> </div&
css设置遮罩
马优晨
01-15 1290
如下，在最外层的div上面加上下面的css即可产生遮罩效果 <div class="aaa"></div> .aaa ::before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; background-color: rgb...
div+css代替iframe框架并带全屏遮罩加载特效
01-24
通过巧妙运用`div+css`，我们可以创建出美观、高效的网页框架，并结合全屏遮罩加载特效，提升用户的浏览体验。在实际开发中，结合JavaScript和jQuery，可以实现更多动态交互功能，让网站更具吸引力。
效果直逼flash的Div+Css+Js菜单
10-30
通过合理运用Div、CSS和JavaScript，开发者可以创建出复杂而优雅的网页菜单，不仅具有与Flash相媲美的视觉效果，还能实现良好的用户体验，同时避免了Flash的兼容性和性能问题。这种技术在现代网页设计中广泛使用，是...
div+css设置div的背景为半透明的方法
09-25
在现代网页设计中，半透明效果经常被用来增强视觉效果，如创建半透明的遮罩层、高亮显示某些信息区域等。通过使用不同的CSS属性组合，开发者可以有效地创建出跨浏览器的半透明效果，提升用户体验。
网站网页遮罩效果详解
05-28
网站网页遮罩效果详细讲解（其他含有实例代码、步骤图解）
漂亮遮罩层css+div
05-27
漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div
html5+css3 弹出遮罩层
09-22
这是一款使用html5 svg和css3制作的全屏遮罩导航菜单，这些遮罩层没有固定的大小但是它们全屏覆盖整个屏幕，可以说大小是以你的浏览器为准。默认是绿色背景，你完全可以换成其它颜色，这个不用我细说了吧。 请在现代浏览器中查看这些demo。 11个效果名称分别是： Huge Inc， Corner， Slide down， Scale， Door， Content Push，Content Scale， Corner Shape， Little Boxes， Simple Genie， Genie 英文看不懂请看演示。 第一个demo的灵感来自于Huge。这个效果使遮罩层淡入淡出，并使里面的内容带有一些3d旋转效果， 这里使用一些视觉差小把戏使遮罩层消失：我们为可见元素设置transition delay使透明度首先开始改变。 其他一些demo中我们使用了Snap.svg来制作SVG路径变形动画。
(HTML+js+css)遮罩层实现源码
04-26
TML遮罩层实现源码，包括html、js、css和图片，并结合loading提示和DIV模拟模态窗口的示例展示遮罩层的使用
CSS DIV遮罩操作
u010443708的专栏
02-06 390
CSS DIV遮罩操作<div> <div></div> </div>将外层div的position属性设置为relative，将内层div的position属性设置为absolutely，以及将overflow设置为hidden。
CSS Mask Div 与另一个 Div - 完整指南
我的博客，不一样的自我表达
06-29 522
CSS 屏蔽是使用图像或其他元素隐藏元素的某些部分的过程。这种技术经常用于网页设计中，以创建有趣的动态效果。通过屏蔽元素，您可以创建看起来比实际更复杂的设计。
css实现页面遮罩
qq_44845659的博客
01-04 1946
点击页面表格数据实现一个页面弹出，可以用遮罩来实现（#cover,#modal,可实现遮罩效果） <template> <el-row v-if="contractInfo.contract.cert_list && contractInfo.contract.cert_list.length"> <el-col :span="19">
JS+CSS简单实现DIV遮罩层显示隐藏
kevin_xiang的专栏
07-07 3772
DIV CSS遮罩层 function showdiv() { document.getElementById("bg").style.display ="block"; document.getElementById("show").style.display ="block"; } function hi
怎么给html底部加个遮罩,div+css实现图片底部透明遮罩文字标题
05-21
最后，我们使用CSS3的过渡效果，当鼠标悬停在容器上时，将标题向上移动，露出图片底部的部分，从而实现了透明遮罩效果。 需要注意的是，以上CSS代码中的 `rgba(0, 0, 0, 0.6)` 表示半透明黑色，其中最后一个参数 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值