自适应高度的一个遮罩层css

最新推荐文章于 2022-11-15 20:28:17 发布
转载 最新推荐文章于 2022-11-15 20:28:17 发布 · 3.6k 阅读 · 0

本文介绍了一个 CSS 层级的具体实现方式，通过使用固定定位和背景图片重复等技术手段，创建了一个无需包裹元素的独立层效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

#J_GrayMask {display:block;position: fixed;z-index:3;top: 0px;left: 0px;height:100%;width:100%;background: url("http://img03.taobaocdn.com/tps/i3/T151l3XxleXXc0OvgI-224-249.png") center top repeat;

_position:absolute;_height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}



//这个层是个单独的层，不需要包裹元素。

hsany330
关注
CSS_定位_宽高自适应下
ysj94s7的博客
01-13 2026
和宽高自适应下 1.定位的基础属性，属性值 2.定位的特殊情况 1）绝对定位在兄弟关系中的演示效果 都添加定位（兄弟元素）====相对，绝对，固定 默认的是后面的把前面的遮盖住===产生效果===层级效果 如何调整层级顺序呢： z-index属性 取值为纯数值，不带任何的单位，只...
DIV+CSS页面布局示例 遮罩层
diehe5608的博客
01-10 143
<!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> ...
CSS-遮罩不设具体高度的父元素
zaoqinghuan的博客
04-30 562
小程序中给定宽度，高度自适应，可以用mode=‘widthFix’,来保持原图片的宽高比不变。所以父元素的高度是根据图片的高度来变化的。与图片同级的是一个css遮罩，需要完全覆盖这个父元素。 方法：只需要把遮罩层绝对定位在四个角，就可以实现遮盖住父元素 具体样式： .video_descript{ position: relative; margin: 25rpx 0rpx; // 图片样式 ....
Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中
01-05 304
<!DOCTYPE html> <html> <head> </head> <body id="body"> <!-- /*弹出遮罩层*/ 第一步：初始化遮罩层的基本属性，将其相对于浏览器窗口定位，将其尺寸缩放为0 第二步：设置遮罩层的高度，以便弹...
页面布局之上下固定中间自适应
喝牛奶的鱼
08-30 7554
常用的页面布局除了两边固定中间自适应和一端固定另一端自适应之外，还有上下固定中间自适应的布局，今天在这里做一下总结。 实现这种布局我主要通过两种方法： 使用绝对定位 对这三栏都实现绝对定位，其中中间绝对定位的位置是上下两栏的高度，内容超出则中间部分出现流动条； 代码实现： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; ...
遮罩层,随div大小一样变化 方案一
tokikou的博客
11-14 492
<div id="div1"></div> <div id="div2"></div> <div id="遮罩"></div> 两个div,想让遮罩显示出来的时候正好盖住div2,div2设置了height百分比,是会随浏览器的高度自动变化的,怎么设置遮罩也正好是盖住div2变化呢? 解决方案 function btnLeftOnclick() { var div = document.createElement("d
实现图片点击自适应预览的js遮罩层方法
- **创建遮罩层**：在图片被点击时，通过jQuery创建一个div元素作为遮罩层，设置其CSS样式以覆盖整个视口，并带有半透明的黑色背景。 - **图片自适应显示**：将点击的图片作为遮罩层的子元素，通过计算图片的原始...
实现移动端点击弹出自适应遮罩层的JS方法
本文将详细介绍如何使用JavaScript（简称JS）技术在移动端点击按钮时弹出一个遮罩层，并确保该遮罩层能够自适应不同屏幕大小。 知识点一：移动端适配概念 移动端适配指的是让网页在不同尺寸和分辨率的移动设备上...
JS移动端点击弹出遮罩层
07-03
2. 使用CSS设置遮罩层的样式，使其自适应移动端屏幕。 3. 编写JavaScript代码，监听按钮点击事件，控制遮罩层的显示和隐藏。 4. 考虑移动端适配，使用`vh`和`vw`单位实现响应式布局，确保在各种屏幕尺寸下都能正常...
老生常谈遮罩层 滚动条的问题
09-02
为了解决这个问题，我们需要通过JavaScript和CSS来实现一个自适应的遮罩层。 在给出的JavaScript代码中，可以看到一个名为`showBg`的函数，它用于显示遮罩层和弹出层。这个函数首先获取了文档的高度和宽度，然后...
jquery遮罩层
01-05
总结，jQuery遮罩层是网页开发中的一个重要工具，通过结合CSS和jQuery，我们可以轻松创建出各种各样的遮罩层效果，提升网站的交互性和用户体验。在实际项目中，可以根据需求进行定制和扩展，以满足特定的设计和功能...
通过css使用background-color为背景图添加遮罩效果的两种方法
09-22
主要介绍了通过css使用background-color为背景图添加遮罩效果的两种方法,需要的朋友可以参考下
层div高度100%的一种，用绝对层遮罩上下
Cui55的专栏
06-17 2903
Untitled Documenthead foot
【CSS】mask遮罩
weixin_46669844的博客
11-15 3362
css遮罩常见属性:mask-image;mask-repeat;mask-position;mask-clip;mask-origin;mask-size
css设置遮罩层(半透明）
qq_51196135的博客
11-08 4892
不用组件（弹出层、控制面板时）可以自己设置遮罩层！
CSS实现 全屏 遮罩
热门推荐
慢半拍
09-12 1万+
CSS实现 全屏 遮罩   遮罩 CSS: .divBG { background: gray; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; display: none; z-index: 20; filte
引导步骤遮罩层html,css3 引导遮罩层
weixin_36357157的博客
06-03 653
要实现遮罩层和部分区域高亮显示，这里的思路是应用了元素的border属性，将元素的四个border值设置的非常大，铺满整个屏幕，这样就实现了页面遮罩部分镂空的效果。让遮罩层的的宽度和高度等于目标元素的宽度和高度，剩下的遮罩效果就是合理设置遮罩层四个border的值的大小，使遮罩层铺满整个屏幕。我们想把引导效果做的更加好看一下，制作成椭圆的效果，需要用到css3的border-radius:50%;...
解决弹窗遮罩层在拉滚动条发现遮罩层没铺满屏幕的问题
yingzizizizizizzz的专栏
05-31 1万+
在做项目时，用到了弹出框，下边要有一层遮罩。写了一个简单的遮罩，拉动滚动条后发现，遮罩层只是遮住了视口，下面看不到根本没遮住，后来经过度娘后才有了解决方法。 有问题的遮罩层代码 .modal .modal-shadow { opacity: 0.3; filter: alpha(opacity=30); background-color: gray; position: absolut
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值