简单遮罩实现

最新推荐文章于 2024-08-08 16:21:49 发布
最新推荐文章于 2024-08-08 16:21:49 发布
阅读量72 收藏
点赞数
分类专栏： html 文章标签： web html css javascript shade ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_5753/article/details/82583298
版权

1. shade.css

.shade {
	width: 100%;
	position: absolute;
	height:100%;
	background-color: black;
	opacity: 0.5;
	filter: alpha(opacity = 50);
	left:0;
	top:0;
	z-index:1001;
}

 

2. shade.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="shade.css" />
</head>
<body>
	<div id="shade" class="shade"></div>
<!--	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>-->
<!--	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>-->
<!--	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>-->
<!--	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>-->
<!--	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>-->
<!--	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>-->
	
</body>

<script type="text/javascript">
	var shade = document.getElementById("shade");
	var scrollHeight = document.documentElement.scrollHeight;
	var clientHeight = document.documentElement.clientHeight;
	var hideHeight = scrollHeight>clientHeight?scrollHeight:clientHeight;
	shade.style.height =hideHeight+ "px";
</script>
</html>

 

 

 

iteye_5753
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS简单实现遮罩层
03-29
本教程将详细介绍如何在iOS中简单实现遮罩层。 首先，我们来看一下`MaskView.h`头文件。这个文件定义了一个名为`MaskView`的自定义视图类，它是`UIView`的子类。在iOS中，`UIView`是所有视图的基础，它负责管理视图...
css 中实现四周阴影
xiaosheng
12-27 3498
.shade { /* 要设置 x 轴和 y 轴的阴影都是 0 */ box-shadow: 0 0 10px rgba(0, 0, 0, .2); } 效果如下:
使用maven的Shade方式解决
热门推荐
赵英超的博客
06-08 1万+
java 依赖包冲突问题描述程序中同时使用了hadoop工具包与ElasticSearch工具导致jar包。程序报错：java.lang.NoSuchMethodError: com.google.common.util.concurrent.MoreExecutors.directExecutor()Ljava/util/concurrent/Executor;内容如下：java.lang.No...
box-shade和border-radius在定位与未定位对象中的使用
赫子子的博客
08-07 1235
box-shade以及border-radius这些css3属性大家肯定不陌生，在此为那些对于box-shade和border-radius还不太熟悉的小白提出一些值得注意的地方，这些值得注意的地方在大家使用过程中肯定遇到过。好了，话不多说，直接正题。为什么会把这两个拿在一起说，后面会讲到。先说box-shade：   box-shade是css3属性（IE8以上）使用方法：{box-shadow...
jQuery超简单遮罩层实现方法示例
10-18
在本文中，我们将探讨如何使用jQuery实现一个超简单的遮罩层，这是一种常见于网页交互中的功能，用于在特定操作期间暂时阻止用户与页面其他部分的交互。 首先，我们来了解遮罩层的基本概念。遮罩层是一种覆盖在页面...
jquery实现简单的遮罩层
11-23
本文实例讲解了jquery遮罩层，包括遮罩层的不同样式实现、mask实现遮罩层等，分享给大家供大家参考，具体内容如下 一、jQuery实现遮罩层的不同样式 1.1 背景半透明遮罩层样式 需要一个黑色（当然也可以其他）背景，...
html几行代码实现简单遮罩框
09-23
简单几行代码实现web页面遮罩框功能带等待图片 。 -洋
Qt之实现遮罩窗口，实现了窗口遮罩效果
07-24
在Qt编程中，实现遮罩窗口（mask window）是一种常见的需求，主要用于在界面操作时提供视觉提示或防止用户误操作。遮罩窗口通常是一个半透明的覆盖层，它允许底层窗口的部分可见，但限制用户的交互。本文将详细介绍...
JavaWeb(HTML/CSS/JavaScript)学习笔记
fjdjdj1的博客
08-04 772
根标签 头部元素 主体元素 注释 HTML基本内容 专业词汇语法细节官网下载网站Visual Studio Code - C
html 的value属性
小鱼儿的博客
08-05 329
属性，并且这个属性的值会根据用户的输入而更新。：当浏览器加载HTML文档并构建DOM（文档对象模型）时，它会为每个。：当用户与输入框交互时（如键入文本），浏览器会更新DOM中该输入框的。如果设置了，它将作为输入框的初始值。当用户开始在输入框中输入文本时，浏览器会更新这个。属性，它反映了输入框的当前值。元素创建一个对应的DOM对象。属性，你仍然可以通过JavaScript访问到它的。属性，并且这个属性的初始值是空字符串（元素），浏览器会自动为该元素创建一个。属性，DOM对象仍然会有一个。
how to set mpdf HTML contains invalid UTF-8 character(s)
Tinywan
08-07 145
PDF导出中文洗衣液厂家(品牌；海依恋+纤维大师�<br>�� Invalid input characters. Did you set $mpdf->in_charset properly? 解决方案 #Try this $html = mb_convert_encoding($html, 'UTF-8', 'UTF-8'); #before calling: ...
【Dash】HTML 组件创建直方图
持续更新中...
08-08 739
创建一个标题组件 html.H1，显示 Hello Dash，文本居中，并定义文本颜色。设置 app 布局，用 html.Div 组件包裹所有子组件，并设置背景颜色。创建一个 dcc.Graph 组件，用于显示之前创建的图表 fig。创建一个 html.Div 组件，文本居中，并定义文本颜色。children是一个列表，包含所有要显示的子组件。id 参数用于标识这个图表，以便在应用程序中引用。
FastAdmin默认表单中显示列表
qq_40088333的博客
08-08 102
FastAdmin默认表单中显示列表
JS优化了4个自定义倒计时
lulei5153的博客
08-04 350
【代码】JS优化了4个自定义倒计时。
pdf2htmlex-精准将pdf转换成html
北光
08-04 1051
将 PDF 转换为HTML而不会丢失文本或格式。
三栏布局的实现方式
最新发布
qq_45108629的博客
08-08 496
左、中、右 三栏，要求先加载中间的结构（圣杯布局、双飞翼布局）
把html字符串转为可以被js操作的dom
服务员的博客
08-04 494
创建的文档片段是独立于当前文档的。如果您想将解析后的 DOM 插入到现有的页面中，可以使用。API 将 HTML 字符串转换为可操作的 DOM 节点。变量中，您可以像操作任何其他 DOM 对象一样操作它。在 JavaScript 中，您可以使用。希望以上信息能帮助您！
【前端编程小白】的HTML从零入门到实战
xingyu_qie的专栏
08-02 1564
之前有读了博客，想让我帮他找一些前端入门的内容，他们报的计算机专业，，我给他推荐了一些菜鸟教程呀什么的。后来想，看来还是很多人需要一些更加入门的可成的，而且很多教程不够实战，HTML章节都是匆匆而过。所以我想着，自己也写一些，基础的，加上实战的，希望可以帮助，想从零基础，到实战的小伙伴们。
html制作卡通图案代码,使用HTML和CSS3绘制基本卡通图案的示例分享
爱敲代码的卡拉米的博客
08-03 587
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
c++实现安卓手机屏幕遮罩
09-08
您好！要在安卓手机上实现屏幕遮罩，您可以使用以下步骤： 1. 创建一个新的透明Activity：在您的Android项目中，创建一个新的Activity，并将其主题设置为透明。 2. 设置Activity布局：在该Activity的布局文件中，添加一个全屏的View，用于覆盖整个屏幕。 3. 设置View的背景色透明度：您可以使用Java代码或XML属性来设置View的背景色透明度，以实现遮罩效果。 4. 启动透明Activity：在您的应用程序中的合适位置，使用Intent启动这个透明Activity。 下面是一个简单的示例代码： 1. 创建一个名为TransparentActivity的透明Activity： ```java public class TransparentActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_transparent); // 设置Activity背景色透明度 View transparentView = findViewById(R.id.transparent_view); transparentView.setBackgroundColor(Color.parseColor("#80000000")); // 这里使用了带有50%不透明度的黑色 // 您可以在此添加其他必要的操作 } } ``` 2. 在res/layout目录下创建一个名为activity_transparent.xml的布局文件： ```xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/transparent_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout> ``` 3. 在您的应用程序中启动透明Activity： ```java Intent intent = new Intent(MainActivity.this, TransparentActivity.class); startActivity(intent); ``` 这样，当您启动透明Activity时，屏幕将被覆盖并显示一个透明的遮罩效果。请根据您的需求进行定制和扩展。希望能对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值