使用半透明层来遮罩页面

最新推荐文章于 2022-11-13 17:17:24 发布
最新推荐文章于 2022-11-13 17:17:24 发布
阅读量164 收藏
点赞数
分类专栏： 表示层
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_12119/article/details/81720965
版权

因为div层是不能把select表单元素遮住的，所以最好先把select隐藏掉。示例：

 

<div id="filter" style="position:absolute; top:0; left:0; width:100%; height: 100%; background-color: black; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5;">
    
</div>

iteye_12119
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MFC绘制半透明的遮罩（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-27 811
MFC绘制半透明的遮罩（附完整源码）
页面遮罩效果
生面别开
11-14 1689
效果： 遮罩效果，就是把页面给遮挡了，让用户无法再点击页面的元素。 原理就是 弄一个遮罩层，在所有元素的最上方，让这个元素铺满屏幕，所以点击实际是点击的这个元素。 利用绝对定位，使元素脱离文档流，z-index属性设置其浮动层的位置，要做这个一个对话框，假设遮罩的z-index是100,那么这个对话框div块的z-index就是101，在它上方了. css样式： .mask {
JS变灰页面显示遮罩层登录窗口，使页面无法操作
08-14
JS变灰页面显示遮罩层登录窗口，使页面无法操作 JS变灰页面显示遮罩层登录窗口，使页面无法操作
winform 页面设计之半透明掩膜，半透明遮罩，遮住模态窗体父窗体
adsd1233123的博客
07-06 2111
winform 中 打开的窗体分两种：模态与非模态 模态窗体，例如对话框，如果不关闭，那么其父窗体是无法操作的， 但是就winform来说 看不出哪个是当前活动窗体； 为了让他两者有区分，我们选择遮住模态窗体的父窗体盖上一层半透明暗淡膜，突出活跃的窗体有了这个遮罩 用在窗体上或者一些禁止使用（loading状态）的控件都可以使用 不过这个控件存在一定的问题，就是带有FormborderStyle自带标题栏就会出现问题链接: https://download.csdn.net/download/adsd12
图片半透明圆形镂空遮罩
leveretz的博客
11-13 1274
图片半透明圆形镂空遮罩
父页面显示遮罩层弹出半透明状态的dialog
09-04
总结来说，实现父页面显示遮罩层并弹出半透明状态的dialog，主要涉及到CSS的布局和样式设置，以及JavaScript的动态控制。通过对遮罩层和dialog的样式定义，我们可以实现所需的视觉效果；通过JavaScript，我们可以...
自定义半透明遮罩层-源码
08-10
在IT行业中，自定义半透明遮罩层是一个常见的前端开发任务，它主要用于创建一个覆盖在网页元素上方的半透明黑屏或灰屏效果，通常用于弹窗、加载提示或者阻止用户与页面其他部分的交互。这个"自定义半透明遮罩层-源码...
数据加载进度条/自定义半透明遮罩层
08-03
例如，使用CSS可以创建一个半透明的div作为遮罩层，通过调整其`opacity`属性来控制透明度；通过JavaScript监听数据加载事件，并根据加载进度更新进度条的宽度或百分比显示。在Web开发中，库如jQuery或ReactJS提供了...
自定义半透明遮罩层
11-12
遮罩层可以覆盖整个页面或者特定区域，通过半透明黑色或灰色背景，使用户聚焦于主要内容，同时保留对页面其他部分的隐约感知。本篇将深入探讨如何实现自定义半透明遮罩层，以及相关的HTML、CSS和JavaScript技术。 ...
弹出窗口并且此窗口带有半透明的遮罩层效果
09-04
在网页设计中，创建弹出窗口并添加半透明遮罩层是一种常见的交互效果，它可以用于显示重要的信息或者用户需要关注的对话框。本教程将详细解释如何通过HTML、CSS和JavaScript来实现这样一个功能。 首先，我们需要...
遮罩层内容半透明解决
ltstud的博客
07-12 3340
div id="nav_img_ios" 是遮罩层,从左上侧 top:0 left:0 的位置 100% 屏幕整个屏幕 divid="qrcontainer" 是遮罩层中间填充内容的部分 div id="qr" 是一个二维码容器,里面是 javascript自动生成二维码的填充容器 div id="describe" 是二维码下面的一段描述文本 ##我们看下上面展示的效果
Jquery超简单遮罩层实现代码
热门推荐
漂浮
08-20 11万+
在开发中，为了避免二次提交，遮罩层的运用越来越普遍 找了很多
前端页面如何为图片添加黑色半透明遮罩
fxjzzyo的博客
02-05 1万+
在实际开发中经常会遇到对图片加一层半透明遮罩，然后上面显示文字说明的需求。 如下图： 如何实现呢？看代码！ 需要把图片放到一个父容器中，为父容器设置背景色为黑色background: #000;，再为图片本身添加一层线性渐变蒙版-webkit-mask:-webkit-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,1),rgba(0,0,0,1),
设置半透明遮罩背景
Allenyhy的博客
08-13 1607
半透明遮罩背景常用于弹窗的背景 如下所示： 代码如下所示： .overlay { top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.7); z-index: 4000; position:fixed; } 小结（非常重要）：首先是fixed固定定位...
页面全屏遮罩的实现 方式
rainbow702的博客
07-17 1361
之前做了一个页面，在点击了某个按钮之后，要求页面出现一个全屏遮罩，一开始使用了position:absolute来实现的。当时因为画面大小是固定的，不可以resize的，所以，没有发现问题。 最近用了同样的做法做了一个遮罩，但是画面是可以进行resize的，所以就发现了一个问题，当画面被reisze到浏览器出现了滚动条的时候，就发现，用absolute 的做法是有问题的。后来改成fixed定位...
Loading page,loading是遮罩页面
Allen_白的专栏
12-27 2153
JS file page.loading.shadow.js { var pageLoadingContainerId = "pageLoadingIconContainer"; var pageLoadingIconContainerId = "pageLoadingShadowContainer"; var loadingIconContainer = document.cre
手机端当页面弹出遮罩层的时候，遮罩后面的页面禁止滚动且“锁定当前位置”
sophia_xiaoma的专栏
01-26 3219
$('.xxx').bind("touchmove",function(e){       e.preventDefault();   });
html半透明遮罩,div背景半透明 覆盖整个可视区域的遮罩层效果
weixin_36072221的博客
05-30 1160
html代码很简单 1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码:.opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; }2 、要覆盖整个可视区域通常的做法是:html,body{ height:100%}.mask{height:1...
html半透明遮罩,如何制作网页半透明遮罩效果
weixin_36263738的博客
05-30 2273
我们经常在浏览网页时会看到遮罩的效果，比如在点击登录后常常会弹出登录框，它的背景就是常用一种半透明的遮罩来禁止登录框这外的操作。现在我们来看看这种半透明遮罩效果应该怎么实现。大致的思路是在body上面放置2个层，一个是半透明的，遮盖整个屏幕；另一个是显示你要显示的内容的。需要注意的是：这两个层的position都要设为absolute;，因为只有设为absolute时， z-index：属性才会生...
css 遮罩层 半透明
最新发布
09-06
当需要为元素添加半透明的遮罩层时，可以使用CSS中的`rgba()`函数来设置颜色值的透明度。该函数的参数由红、绿、蓝和透明度组成，取值范围为0-255。 例如，如果要创建一个半透明黑色遮罩层，可以设置元素的背景色为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值