DIV CSS遮罩层

最新推荐文章于 2024-05-30 16:48:43 发布
最新推荐文章于 2024-05-30 16:48:43 发布
阅读量632 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/snihcel/article/details/12145769
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns=" http://www.w3.org/1999/xhtml" >
<head>
    <title>DIV CSS遮罩层</title>
    <script language="javascript" type="text/javascript">
        function showdiv(obj1,obj2) {
   document.getElementById(obj2).style.top=document.documentElement.scrollTop+60;//document.body.scrollTop
            document.getElementById(obj1).style.display = "block";
            document.getElementById(obj2).style.display = "block";
        }
        function hidediv(obj1,obj2) {
            document.getElementById(obj1).style.display = 'none';
            document.getElementById(obj2).style.display = 'none';
        }
    </script>
 
    <style type="text/css">
        .bg{ display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 300%;  background-color: black;  z-index:1001;  -moz-opacity: 0.7;  opacity:.70;  filter: alpha(opacity=70);}
       .show{display: none;  position: absolute;  top: 25%;  left: 22%;  width: 53%;  height: 49%;  padding: 8px;  border: 8px solid #E8E9F7;  background-color: white;  z-index:1002;  overflow: auto;}
    </style>
</head>
<body>
    <p>&nbsp;    </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>
      <input id="btnshow" type="button" value="Show" οnclick="showdiv('bg','id1');" />
    </p>
<div id="bg" class="bg"></div>
    <div id="id1" class="show" style="top:100px;">测试ewrwerwerwe
        <input id="btnclose" type="button" value="Close" οnclick="hidediv('bg','id1');" />
    </div>
</body>
</html>
snihcel
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯 CSS 实现缕空遮罩层
lwenn的专栏
07-20 3682
需求 有很多网页在做引导时，遮罩层做成了缕空效果，最近我也遇到一个这样的需求，如图： 实现 常见方法 最容易想到的方法是切图，这个不用解释了。 在网上找到的大部分做法都是用边框，那么我们来看一下边框怎么实现这个效果。 &lt;div class="mask"&gt;&lt;/div&gt; .mask { position: absolute; top...
css遮罩层效果
qq_44017357的博客
10-22 1441
css遮罩层效果 在浏览b站网页版首页时，我们会看到这样的效果 将鼠标移动到图片上后 我们可以使用css实现这一效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #mask_layer{width: 206px;height: 116px;overflow: hidden; positi
CSS遮罩层
weixin_44282093的博客
07-19 9308
css遮罩层
div遮罩层
热门推荐
黎小小的博客
07-05 1万+
实现遮盖层，使一部分区域不可点击编辑等。 1.简易遮罩层一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, i...
css属性mask遮罩
最新发布
bingmoujs的博客
05-30 300
可以设置 alpha（默认）表示使用遮罩图像的 alpha 通道，或者 luminance 表示使用遮罩图像的亮度。可以设置 repeat（默认）、no-repeat、repeat-x、repeat-y 等。: 定义遮罩的起始位置。可以设置 border-box（默认）、padding-box 或 content-box。: 定义遮罩的位置。可以设置具体的水平和垂直定位值，也可以使用关键字 center 居中对齐。可以设置具体的宽度和高度值，也可以使用关键字 auto 自动缩放。: 定义要用作遮罩的图像。
css案例（一）遮罩层
xtcbql的博客
10-01 1601
css案例：遮罩层
Css-遮罩层
weixin_45328723的博客
04-22 6438
遮罩层原理 利用一个全屏、半透明的div遮住页面上其它元素 <style> .tudou { position: relative; width: 444px; height: 320px; background-color: pink; margin: 30px auto; } .tudou img {
利用div实现遮罩层效果
w36680130的博客
12-25 1441
本文转载自：https://www.cnblogs.com/dige1993/p/4606032.html 作者：dige1993 转载请注明该声明。利用div实现遮罩层效果就是利用一个全屏、半透明的div遮住页面上其它元素，典型的例子就是百度的登录界面。下面贴出示例代码： <!DOCTYPE html> <html> <head> <meta ...
漂亮遮罩层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实现的遮罩层完美兼容IE6-IE9 FireFox
09-25
本篇文章将详细介绍如何使用CSS和div元素来创建一个兼容IE6到IE9以及Firefox的遮罩层。 首先，我们需要在HTML中定义两个div元素。一个是`#black_overlay`，它作为遮罩层，覆盖整个页面，通常具有半透明黑色背景；另...
div背景半透明，覆盖整个可视区域的遮罩层效果
12-30
1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 2 、要覆盖整个可视区域通常的...
DIV遮罩层 div div
04-13
DIV遮罩层，即通过HTML中的`<div>`元素结合CSS样式和JavaScript脚本来实现的一种遮罩效果。通常，这个`<div>`元素被设置为绝对定位（`position: absolute`），并覆盖在整个页面之上，其宽度和高度根据页面的实际大小...
CSS3 实现Loading加载，页面遮罩层的应用
08-03
综上所述，CSS3的Loading加载和页面遮罩层是构建高质量移动H5页面不可或缺的技术手段。通过熟练掌握这些技术，开发者可以创建出更流畅、更具吸引力的用户体验，从而提升产品的整体品质。在开发过程中，我们应不断...
css-遮罩层
SqlloveSyn的博客
01-01 278
利用一个全屏、半透明的div遮住页面上其它元素。后减少了HTML界面的冗余。
CSS之隐藏与显示遮罩层
weixin_45707229的博客
07-05 1305
CSS之隐藏与显示，可以用display: none和display: block，或者visibility: hidden和visibility: visible等
【CSS】mask遮罩
weixin_46669844的博客
11-15 2951
css遮罩常见属性:mask-image;mask-repeat;mask-position;mask-clip;mask-origin;mask-size
css设置遮罩层(半透明）
qq_51196135的博客
11-08 4156
不用组件（弹出层、控制面板时）可以自己设置遮罩层！
前端页面怎么添加遮罩层
weixin_45457797的博客
12-08 1041
关于遮罩层，最常用到的场景就是在前端请求过程中和导航栏下拉。
DIV遮罩层、弹框、设置颜色、边框颜色设置等功能实现
Wc&Yd博客
03-09 2586
文章目录DIV遮罩层、弹框、设置颜色、边框颜色设置等功能实现一、DIV是什么？二、功能实现1.静态页面2.弹框3.边框设置三、参考代码 DIV遮罩层、弹框、设置颜色、边框颜色设置等功能实现 开始：本文简要介绍遮罩层弹框、大小、颜色以及边框颜色的设置。 一、DIV是什么？ DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。 二、功能实现 1.静态页面
css遮罩层怎么做
05-27
要创建一个 CSS 遮罩层，需要使用 CSS 的 `position` 和 `z-index` 属性。下面是一个简单的 CSS 遮罩层的实现： 首先，在 HTML 中创建一个遮罩层的容器，可以使用一个 `div` 元素来实现。例如： ``` <div class=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值