实现父div透明，子div不透明

最新推荐文章于 2022-11-04 16:53:02 发布
转载 最新推荐文章于 2022-11-04 16:53:02 发布 · 221 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/mxw09/archive/2011/09/27/2193238.html
文章标签：

#xhtml #javascript #ViewUI

本文介绍了一种使用HTML、CSS及JavaScript实现的弹出层效果，该效果包括一个半透明的外层DIV和一个完全透明的内层DIV。通过简单的代码实现了良好的交互体验，并且兼容多种主流浏览器如IE6.0、IE7.0、Firefox 3.6等。

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

<!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> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>css外层DIV半透明内层div不透明-弹出层效果的实现【实例】</title> 
        <style type="text/css"> 
            <!-- 
            body,td,th { 
                font-size: 12px; padding:0; margin:0; 
            } 
            .tanchuang_wrap{ width:600px; height:400px;position:absolute;left: 0px;top: 0px;z-index:100; display:none;} 
            .lightbox{width:600px;z-index:101; height:400px;background-color:red;filter:alpha(Opacity=20);-moz-opacity:0.2;opacity: 0.2; position:absolute; top:0px; left:0px;} 
            .tanchuang_neirong{width:353px;height:153px;border:solid 1px #f7dd8c;background-color:#FFF;position:absolute;z-index:105;left: 123px;top: 123px;} 
            --> 
        </style> 
        <script language="javascript"> 
            function closeDiv(divId){ 
                document.getElementById(divId).style.display = 'none'; 
            } 
            function displayDiv(divId){ 
                document.getElementById(divId).style.display = 'block'; 
            } 
        </script> 
    </head> 
    <body> 
        <div style="width:400px; height:400px; position:relative; text-align:center;"> 
            <div class="tanchuang_wrap" id="aaaa"> 
                <div class="lightbox"></div> 
                <div class="tanchuang_neirong"> 
                    <p><span onClick="closeDiv('aaaa')" style=" cursor:pointer;">关闭</span></p> 
                    这里是弹窗内容</div> 
            </div> 
            <span onclick="displayDiv('aaaa')" style="cursor:pointer;">点击我</span> 
            <p>测试通过，兼容IE6.0、IE7.0、火狐3.6、遨游等各大浏览器</p> 
        </div> 
    </body> 
</html> 

转载于:https://www.cnblogs.com/mxw09/archive/2011/09/27/2193238.html

超强html5父容器透明子容器不透明
milijiangjun的博客
09-15 498
极度简单案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父容器透明子容器不透明</title> </head> <style type="text/css"> .box{ width: 300px; height: 150px;
Css 将某div设置为透明，但其子元素不透明
最新发布
u012632105的博客
09-03 2787
来设置元素的透明度，但它会影响到元素的所有子元素。首先，将父元素的背景颜色设置为rgba格式，其中a表示透明度。然后，将子元素的背景颜色设置为不透明的颜色即可。这样，只会让父元素的背景透明，而不会影响到子元素。可以使用css中的属性。
CSS 实现父组件半透明，子组件不透明
Lhy_JL的博客
06-11 560
父组件半透明，子组件不透明，达到部分组件高亮的效果； 应用场景：  当 input 输入框获取焦点的时候，给 body 添加半透明效果，input 组件不透明； 举例子：（ 应用到CSS3的rgba属性） background: #rgba(88, 88, 88, 0.3); ...
css父div半透明子div不透明
baidu_40537062的博客
05-12 745
不要把父div的opacity设为0.3，而要把background-color属性中rgba的a（alpha透明度）设为0.3 .父div{ /* opacity: 0.3; */ background-color: rgba(0, 0, 0, 0.3); }
html和css实现透明div上的div不透明，也可说父div透明，子div不透明
热门推荐
aSuncat
07-11 1万+
css:实现透明div上的div不透明，也可说父div透明，子div不透明，但这里并不是严格的父子关系，只是看起来像是父子关系。 一、方法一： （1）代码片段：... <style> div.background { width:500px; height:250px; margin:
html中设置父div的透明度不影响子div透明度
dongbike1399的博客
07-19 647
父级div使用background:rgba(0,0,0,0.5); 子级div使用opacity:1; 转载于:https://www.cnblogs.com/fcynn/p/11201076.html
让div透明而里面的文字不透明的写法
12-13
用两个DIV 作为容器实现 Firefox chrome IE6+ 复制代码代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <...
js实现鼠标划过给div加透明度的方法
10-24
在div元素被鼠标悬停时，其透明度会从100（不透明）变化到70（半透明），即通过修改filter属性来实现透明度的变化。 对于非IE浏览器，比如火狐，我们使用了CSS3的`opacity`属性来设置透明度。`opacity:值;`中的`值`...
div 背景透明度 如何设置一个div的背景透明度
01-21
本节向大家爱描述一下如何设置DIV背景颜色透明度，opacityOpacity设置或检索透明渐变的开始透明度，Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。Style参数指定了透明区域的形状特征...
父div完全透明，子div不透明的css设置方法
crslee的专栏
11-06 1459
这是我的基友教我的，他的名字叫做蔡军宏， 好吧，
关于父控件设置背景透明，子控件不透明
qq_32306959的博客
11-04 801
getBackground().mutate() 子控件状态不受父控件状态影响。
css如何让子类不透明,如何实现父容器透明而子容器不透明
weixin_33417904的博客
08-03 1018
在css中，为图片设置透明是件非常容易的事情，通常情况下，如果我们为父容器设置了透明度，子容器将会继承父容器的这一性质。但如果我们不想子容器也随父容器透明，这该如何实现呢？下面课课家网站为大家带来两个解决之道。方法一：众所周知，在CSS中,浏览器兼容是一个相当令人头疼的问题。所以此方法，我们分别从IE和firefox两种浏览器考虑。我们都知道，当一个块级元素的position样式为absolute...
让容器半透明显示容器后的背景
shj_01的博客
08-07 326
前端小白记录学习和工作所遇到的问题 具体需求： 一个页面中最外层有一个父盒子容器，在父容器内有一个nav导航标签。为父容器设置背景图，然后让nav导航栏处于半透明状态，并且可以通过nav导航栏看见父容器的背景图。 解题思路： 设一个div父容器，为其设置background背景， 在父容器内部定义一个nav标签，为其使用opacity设置透明度。 遇到问题： 导航栏设置透明度方式？ opacity：透明度（0 -1）—— 设定容器下所有元素，op...
html实现div变透明,css实现父div透明子div内容不透明
weixin_27785375的博客
06-10 1426
标题可能不是很专业，只要你有一点前端基础的应该能看懂意思，昨天没休息好，今天写项目有点飘，总是写了尾巴忘了头，年轻少熬夜*-*如标题今天记录三个Css属性opacity rgb rgba下面来讲解一下久伴遇到的坑，由于久伴是前端小白，项目经验不多，在写一个demo的时候遇到一个问题，如图所示父div透明了，但是父div中的子div也继承了opacity透明属性，这可不是久伴要的效果解决方案父div...
css实现遮罩层，父div透明，子div不透明
qq_36935391的博客
12-23 8562
博客园 首页 新随笔 联系 管理 订阅 随笔- 1021  文章- 1  评论- 24  css实现遮罩层，父div透明，子div不透明 使用元素的opacity 属性，设置遮罩层的效果， 主要 样式是：background-color: #ooo; opacity:0.3; 1 2 3 4 &lt;div style="wid...
CSS实现父元素半透明，子元素不透明
weixin_30871293的博客
04-28 618
CSS实现父元素半透明，子元素不透明。 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明，而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明。但是这样实现的半透明有个问题，那就是这个属性会被子元素所继承。 如下代码，则子元素中也将是半透明效果，无论你将子元素的半透明值重置还是如何都不会改变这一情况。 .parent{opacity...
CSS实现父元素半透明,子元素不透明的问题
简单Cere
08-03 4921
关于这个问题，其实是不熟悉opacity和rgba，下面解释一波~ 颜色我们都知道有RGB，在RG个新的值，成B颜色模型增加了一为了RGBA颜色模型。最后一个是alpha通道的值，取值在0.0到1.0之间。 共同点： 两者控制透明度的都是一个小数，从0到1，0.0是完全透明，1是完全不透明。 不同点： opacity属性的值，可以被其子元素继承！！！ 让我看看代码如下： &...
CSS+DIV实现透明div拖动的JQuery特效
从给定文件信息中可以看出，需要详细讲解的知识点围绕着如何使用CSS和DIV以及JQuery来实现一个可以拖动的透明DIV特效。以下是对该知识点的详细说明： ### 知识点：透明div和拖动特效的实现方法 #### 1. DIV元素的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值