设置一个DIV半透明，怎么才能使这个DIV中的其他DIV不半透明？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了设置一个DIV半透明，怎么才能使这个DIV中的其他DIV不半透明？相关的知识，希望对你有一定的参考价值。
RT
怎么也解决不了，希望高人能够帮帮我，在此先谢谢了！
baibibo555的回答经测试不正确，期待高人解答。
这种情况下，是不可能在这个DIV里面的DIV显示为不是半透明的。
<div id="a"><div id="b"></div></div>
好像上面，div a设置为半透明后，div b也只能跟着。
解决方法只有修改结构：
<div id="a"></div>
<div id="b"></div>
把本来是a里面的东西拿出来，然后设置b“叠”在a上，使看上去b在a里面。
这种方法比较实际，而且比较好兼容性。 参考技术A <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body text-align:center
.touming_DIV filter:alpha(opacity=50); -moz-opacity:0.5; background:#000; width:500px; height:200px; position:absolute; z-index:99; top:50px; left:50%; margin:0 0 0 -250px
.Main_DIV width:500px; height:200px; position:absolute; z-index:100; top:50px; left:50%; margin:0 0 0 -250px
.Main_DIV div color:#fff; line-height:200px; font-weight:bold
</style>
</head>
<body>
<div class="touming_DIV"></div>
<div class="Main_DIV">
<div>文字内容放在这里，明白了吧</div>
</div>
</body>
</html>
==================================================================
以上是在ie和火狐下都可以正常显示的半透明效果，如果有需要可以Q我308786370
祝你好运！ 参考技术B 你好，这种时候你可以在父类DIV中使用 background: rgba(255,255,255,0.3);来设置它的透明度，前三个参数是三原色的配置参数，第四个是透明度的配置参数 参考技术C 父元素如果设置opacity会影响到所有子元素。如果你紧紧想让父元素背景半透明可以用rgba颜色，例如rgba(0,0,0,0.5)
,
0.5就是透明度。 参考技术D <div id="none" style="filter:alpha(opacity=50);position:absolute;display:block; width:201px; border:#FF0000; margin-top:0px;overflow:scroll; height:300px;overflow-x:hidden; z-index:100; left:203px; top:130px; background-color:#FFFFFF;" >
<ul style=" margin-left:0px; margin-top:0px;list-style-type:none; width:200px; " >
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<div>
为 div 创建线性透明渐变
【中文标题】为 div 创建线性透明渐变【英文标题】：Creating a linear transparent gradient to a div 【发布时间】：2011-05-02 00:18:55 【问题描述】：我想为 div 创建一个线性透明渐变。有没有办法用jquery做到这一点？或者我应该使用像 raphaeljs 这样的其他库吗？我想实现如下效果：
【问题讨论】：
可能最稳健的解决方案是在 div 下放一个带渐变的半透明 png。当然，渐变是垂直设置的。 【参考方案1】：正如 bArmageddon 指出的那样，公认的解决方案并不能解决问题——它只是淡化了背景。一个简单的解决方案是使用 :before 或 :after 在文本上添加渐变：
div
position: relative;
div:before
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
background: url("transparent_fade.png") repeat-x;
【讨论】：
【参考方案2】：这里的棘手之处在于，示例中的渐变均匀地映射到文本和容器。正如很多人所展示的那样，将透明渐变映射到背景属性很容易，但这会使文本保持不变。
不幸的是，我认为没有任何直接的方法可以在不做出一些妥协的情况下获得您想要的渐变效果，根据您的需要，它们可能是值得的解决方案。因此，为此，这里有两个示例说明如何实现示例图像中显示的效果，均使用<canvas>。
1.假装它
Demo on JSLint.
这很简单，您在文本块上放置一个<canvas> 元素，然后绘制从完全透明到文本块下方背景颜色的渐变。它不是真正透明的，所以它实际上并没有显示下面的任何信息，但如果你想淡化成一个固定的、预定的颜色，那么这个效果很好。
2。画布文字
Demo on JSLint
此示例更复杂，但完全复制了示例中显示的透明效果。本质上，它完全抛弃了 HTML 文本块，只是将整个 shabang 绘制到 <canvas> 上。但是，它也有一些缺点：
画布似乎不喜欢 换行文本，所以你必须指定 单独的行。
Canvas 文本的浏览器实现可能仍然有些模糊。
可访问性和 SEO，尽管您可以轻松编写一个 jQuery 插件，用于在运行时将带有文本的常规 DOM 元素转换为该解决方案。
【讨论】：
【参考方案3】：你可以用 CSS3 做到这一点：
例如
div
opacity: 0.5;
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/
http://gradients.glrzad.com/
http://www.colorzilla.com/gradient-editor/
http://css-tricks.com/css3-gradients/
【讨论】：
"对于非 css3 浏览器" ?这里使用的唯一 CSS3 属性是opacity，它不做任何渐变。其他 3 个属性是特定于供应商的。恕我直言，这不是一个好的解决方案：它不是“面向未来的”，也不是我希望在网络上看到的那种东西。【参考方案4】：
我使用 jquery 和 112 个 div 创建了它。十行文本 div 的父 div 越透明，背景 div 越透明 100 个 div。
http://jsfiddle.net/generalhenry/bDd5w/
【讨论】：
不错的想法和实现+1，但实际上是一场灾难xD 已经有很多更实用的解决方案，我个人主要是好奇能不能用jquery作为主要工具。【参考方案5】：我使用 Raphael js http://www.jsfiddle.net/pahnin/fsdnW/4/ 创建了这个 喜欢就去看看吧
** 编辑 **
我通过添加一个带有渐变的矩形并使其与 div 大小相同来创建它
【讨论】：
【参考方案6】：为什么不让它保持轻便和浏览器兼容。
div
backgroud-image: url('images/gradient.png');
background-repeat: repeat-x;
background-position: top right;
【讨论】：
这是如何创建线性透明渐变的？ gradient.png 不是必须假设它正在褪色的颜色吗？ PNG 可以随着透明度褪色，所以背景颜色设置将是褪色的颜色。 这个解决方案没有回答问题，它不会让Div渐变的内容变成白色，只有背景。【参考方案7】：不确定您到底在寻找什么，但请查看Gradienter jQuery plugin。
【讨论】：
以上是关于设置一个DIV半透明，怎么才能使这个DIV中的其他DIV不半透明？的主要内容，如果未能解决你的问题，请参考以下文章