CSS设置：背景透明，弹出内容不透明

最新推荐文章于 2021-08-04 01:03:36 发布
最新推荐文章于 2021-08-04 01:03:36 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： 技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42538872/article/details/102767572
版权

其实就是一个技巧：设置一个DIV这里我取名为：body_demo
在显示弹框的同事，将这个body_demo增加一个class名字：body_over
body_over设置为透明背景，然后将整个DIV的宽度高度设置100%沾满整个屏幕，将不需要透明的部，这里是divTop，设置属性：position:absolute;z-index: 999;其他定位自己设定自己需要的即可
在这里插入图片描述

初级码农23333
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS代码实现背景透明而文字不透明
04-30
CSS代码实现背景透明而文字不透明，兼容支持火狐、360、谷歌、IE6-IE11等浏览器
弹出一个居中的DIV，并遮住背后的内容
不积跬步，无以至千里
08-01 524
居中弹出div进行修改/添加是很常见的操作，样式大同小异，文中实现了居中弹出div,并遮盖后面的内容(被遮挡的内容无法被操作)。 直接上代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>居中弹出div,并遮住后面的内容</title> <meta name="renderer" content="webkit"> <meta h.
设置页弹框背景不透明问题分析及解决
Monster-L的专栏
12-07 2181
一、问题背景 在开发新版本时，有个需求是用户通过点击跳转到系统设置界面时，弹出一个对话框。对话框用来描述为什么需要用户进行设置，引导用户完成开启设置。在自己的activity中弹出对话框大家都知道怎么做， 但是在系统设置界面弹出对话框肯定没那么方便了。一开始有两个方向： 在打开设置页同时打开一个dialog样式的activity，这样给人的感觉就像是真正的对话框。使用悬浮窗，将d
弹窗点击透明部分隐藏（阴影部分隐藏）
weixin_44258964的博客
07-07 1019
本文是对js、jq的点击关闭弹窗阴影方法的总结整理，希望可以帮助大家学习快速使用。
仿IOS底部选项效果--底部弹出PopupWindow，背景变为半透明效果
萧萧北keno的专栏
10-09 6316
底部弹出PopupWindow，背景变为半透明效果，采用两种方式实现 转载请注明出处：http://blog.csdn.net/LANG791534167/article/details/48985101 先来看看运行效果图 [方式一]实现从底部弹出PopupWindow原理：定义一个高度为wrap_content的PopupWindow布局文件，根据屏幕底部的位置显示在Bottom1.首
每日总结：DIV弹层遮盖、DIV设置透明背景色、JS调用SharePoint 中的SP.UI.ModalDialog弹出遮盖层显示
xuemoyao的专栏
03-24 2350
前言： 这是在上周的工作中的一些小心得，平时用到的地方也很多，希望可以给大家一些启发和帮助。 1、 DIV弹出层遮盖 解析： 这是一个比较常见问题，有很多的网站的注册、或者登录都是用这种弹出遮盖层的方式来解决的。以前也有研究过这个东西，在网上也有各种各样的源码、JS脚本之类的东西，但总是觉得太麻烦，因为本身这个东西就只是一个谈层遮盖而已，我觉得不应该要写那么多的代码，昨天加班忙了一天，也遇
2021-06-07
qq_45958454的博客
06-07 486
如何简单的使vant popup弹窗的遮盖层变为透明前言如何在使用vant的popup组件时以简单的方式实现遮罩层的透明化？ 前言 最近在学习H5的相关知识，由于从未接触H5，故借此博客记录一些我遇到的问题 如何在使用vant的popup组件时以简单的方式实现遮罩层的透明化？ 其实在看了官方文档给的API后可以明显的找到如下几个prop与遮罩层有明显的关联 这个时候我首先想法就是将是否显示遮罩层overlay属性设为false，这样是否就能使遮罩层消失？不过如果这么容易就解决了我也不至于将其搬到此处来
css3半透明遮罩背景lightbox图片展示特效
06-11
Lightbox是一种流行的设计模式，当用户点击图片预览链接时，会在当前页面上弹出一个全屏或半屏的图片视图，同时提供一个半透明的遮罩层，以增强用户体验。 一、CSS3半透明遮罩 半透明遮罩可以通过设置`opacity`属性...
一个半透明效果的弹出框
06-02
半透明弹出框的优势在于，它不会完全遮挡背景内容，使得用户在查看弹出信息的同时仍能对页面其他部分有所感知，降低了用户的认知负担。此外，这种设计还可以增加界面的层次感和动态效果，提升整体的视觉体验。 在...
弹出层全屏半透明（浏览器全兼容）
12-13
在压缩包中的文件可能包含了一个示例代码，展示了如何将这些技术整合在一起，实现一个在所有主流浏览器（包括IE6）上都能正常工作的全屏半透明弹出层。通过查看和分析这些代码，开发者可以学习如何处理浏览器差异，...
弹出框，半透明
12-07
综上所述，创建一个兼容各个浏览器的半透明弹出框需要结合HTML、CSS3和JavaScript的知识，同时考虑用户体验和跨浏览器兼容性。通过分析`school.html`文件，你可以学习到如何实际应用这些技术来实现这样的效果。
DIV始终居中的半透明弹出层.rar
03-23
在网页设计中，"DIV始终居中的半透明弹出层"是一个常见的需求，它涉及到CSS布局、定位以及透明度设置等多个技术点。下面将详细解释这些知识点。 首先，`DIV`是HTML中的一个块级元素，常用于创建网页布局结构。在本...
PopupWindow弹框其他背景变暗以及透明问题
weixin_44427177的博客
07-10 651
首先 我们需要准备需要弹出的popupwindow 设置完成以后 在进行以下操作 //设置为全局 private WindowManager.LayoutParams lp; 声明完事在需要弹出popupwindow的位置 进行一下操作 lp = getActivity().getWindow().getAttributes(); lp.alpha = 0.4f; // 0.0-1....
实现popupwindow弹出后背景办成半透明
lzq520210的博客
05-10 1216
if (mPopupWindow == null || !mPopupWindow.isShowing()) { LayoutInflater layoutInflater = LayoutInflater.from(ShopsListActivity.this); popupView = layoutInflater.inflate(R.layout.popup_shop, nu
弹出窗口背景透明 css,CSS弹出背景半透明窗口
weixin_39537977的博客
08-04 2671
弹出窗口,背景半透明body{margin:0px;}#bg{width:100%;height:100%;top:0px;left:0px;position:absolute;filter: Alpha(opacity=50);opacity:0.5; background:#000000; display:none;}#popbox{position:absolute;width:400px;...
CSS中设置背景透明而其上的文字不透明
我只会html
07-18 1046
写关于透明度的样式时，一直习惯于使用opacity属性，最近发现这个属性不仅影响到当前元素，其下的所有子元素透明度都会被影响到，实在是比较麻烦。 查了很久，才发现可以通过rgb方法设置自带透明度的背景颜色，这样一来，就不用担心会影响到子元素中的内容了。 代码如下： .lg-screen { padding-top: 30px; padding-bottom: 30px; margin-bottom: 30px; /* 带透明度的背景 */ background-col
Window弹窗两种透明的方式
天花板的随笔
05-20 2296
通过WindowManager添加一个弹窗，系统默认会给弹窗添加黑色的背景。这个时候如果想要一个半透明的效果，有两种方式： 1，设置WindowManager.LayoutParams的alpha属性，取值在0.0-1.0之间，值越小越透明。 WindowManager.LayoutParams wmParams = new WindowManager.LayoutParams(); wmParams.alpha = 0.2f; 设置了这个透明值之后，弹窗中所有的内容，不管是根布局还是子控件，都会变得透明
css分层,实现遮罩底层弹出新窗口里可以操作，最下层能看到单不能操作
weixin_30908941的博客
06-11 209
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="background-color: #...
mac下浏览器全屏被隐藏地址栏问题的解决办法
qq_42538872的博客
04-04 7896
这里打钩即可
CSS实现背景图片透明而文字不透明效果
最新发布
05-19
可以使用 CSS3 中的 RGBA 颜色值来实现这个效果。具体实现步骤如下： 1. 将背景图片作为元素的背景（background）。 2. 设置元素的背景颜色为 RGBA 颜色值，例如...这样，就可以实现背景图片透明而文字不透明的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值