87,997
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
l676331991 2013-10-23
- 打赏
- 举报
是的，背景层和弹出层不能是父子关系，否则opacity属性会影响弹出层。
不过即使是父子关系，也是有解的，那就是半透明不用opacity来解决。此方法兼容IE6+，chrome、firefox自不必说。
在支持css3的浏览器上，用backgorund: rgba(0,0,0,.4)，不支持rgba颜色的浏览器（IE678）使用IE filter中的gradient，IE滤镜的颜色支持alpha通道，startcolorstr/endcolorstr 取值是#AARRGGBB ,前两位表示alpha透明值。
.bg{
background-color: rgba(0,0,0,.5);
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#88000000,endcolorstr=#88000000e);
}
JeremyChenX 2013-10-23
- 打赏
- 举报
嗯,谢谢斑竹,以后有问题,我还得继续请教..
斯洛文尼亚旅游 2013-10-23
- 打赏
- 举报
不能为父子关系。除非你的子为半透明就不会影响父节点，否则返回来不行
JeremyChenX 2013-10-23
- 打赏
- 举报
当我创建了一个背景div 可以透明. 但同时我想,弹出来的那个div 在这个背景div的里面.同时,弹出来的div不透明.该怎么做?谢谢斑竹先...[/quote]
要做2个不同的层
<style>
.alpha{position:absolute;z-index:10;left:0px;top:0px;filter:alpha(opacity=50);opacity:.5;background:#000000;}
.infolayer{position:absolute;width:400px;height:300px;background:#ffffff;z-index:1000}
</style>
<script>
window.onload = function () {
var backCompat = document.compatMode == 'BackCompat';
var w = backCompat ? document.body.scrollWidth : document.documentElement.scrollWidth
, h = backCompat ? Math.max(document.body.clientHeight, document.body.scrollHeight) : document.documentElement.scrollHeight;
var div = document.createElement('div');
div.className = 'alpha';
div.id = 'lightbox';
div.style.width = w + 'px';
div.style.height = h + 'px';
document.body.appendChild(div);
div = document.createElement('div');
div.className = 'infolayer';
document.body.appendChild(div);
div.style.top = (h - div.offsetHeight)/2 + 'px';
div.style.left = (w - div.offsetWidth)/2 + 'px';
}
</script>斯洛文尼亚旅游 2013-10-23
- 打赏
- 举报
当我创建了一个背景div 可以透明. 但同时我想,弹出来的那个div 在这个背景div的里面.同时,弹出来的div不透明.该怎么做?谢谢斑竹先...[/quote]
要做2个不同的层
<style>
.alpha{position:absolute;z-index:10;left:0px;top:0px;filter:alpha(opacity=50);opacity:.5;background:#000000;}
.infolayer{position:absolute;width:400px;height:300px;background:#ffffff;z-index:1000}
</style>
<script>
window.onload = function () {
var backCompat = document.compatMode == 'BackCompat';
var w = backCompat ? document.body.scrollWidth : document.documentElement.scrollWidth
, h = backCompat ? Math.max(document.body.clientHeight, document.body.scrollHeight) : document.documentElement.scrollHeight;
var div = document.createElement('div');
div.className = 'alpha';
div.id = 'lightbox';
div.style.width = w + 'px';
div.style.height = h + 'px';
document.body.appendChild(div);
div = document.createElement('div');
div.className = 'infolayer';
document.body.appendChild(div);
div.style.top = (h - div.offsetHeight)/2 + 'px';
div.style.left = (w - div.offsetWidth)/2 + 'px';
}
</script>JeremyChenX 2013-10-23
- 打赏
- 举报
嗯好吧..
似梦飞花 2013-10-23
- 打赏
- 举报
除了css3 用rgba外的话 貌似css2不能的样子
JeremyChenX 2013-10-23
- 打赏
- 举报
我现在就遇到一个这样的问题...内两个div现在必须是父子关系.并且,子div不可以透明....大神,求指教..[/quote]
而且,背景的透明度是可以指定的...小弟跪谢...
JeremyChenX 2013-10-23
- 打赏
- 举报
我现在就遇到一个这样的问题...内两个div现在必须是父子关系.并且,子div不可以透明....大神,求指教..
似梦飞花 2013-10-23
- 打赏
- 举报
第二个div通过定位定位到指定的位置 和第一个一样 只是不要设置透明 而且两个div不要是父子关系 否则第二个div也会透明的
JeremyChenX 2013-10-23
- 打赏
- 举报
问题我还有一个弹出内容的div. 背景是不透明的,我还想放在整个为背景为黑色透明层的里面...
JeremyChenX 2013-10-23
- 打赏
- 举报
当我创建了一个背景div 可以透明. 但同时我想,弹出来的那个div 在这个背景div的里面.同时,弹出来的div不透明.该怎么做?谢谢斑竹先...
似梦飞花 2013-10-23
- 打赏
- 举报
弹一个div 设置position为absolute/fixed left top bottom right都为0 透明ie用filter:alpha(opacity=50) w3c opacity:.5 颜色改变设置background-color
这些属性都可以通过js设置
斯洛文尼亚旅游 2013-10-23
- 打赏
- 举报
lightbox效果，获取视窗的宽和高，半透明层设置为视窗的高/宽，设置透明样式，浮动层那个自己计算为准，设置为absolute
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
.alpha{position:absolute;z-index:10;left:0px;top:0px;filter:alpha(opacity=50);opacity:.5;background:#000000;}
</style>
<script>
window.onload = function () {
var backCompat = document.compatMode == 'BackCompat';
var w = backCompat ? document.body.scrollWidth : document.documentElement.scrollWidth
, h = backCompat ? Math.max(document.body.clientHeight, document.body.scrollHeight) : document.documentElement.scrollHeight;
var div = document.createElement('div');
div.className = 'alpha';
div.id = 'lightbox';
div.style.width = w + 'px';
div.style.height = h + 'px';
document.body.appendChild(div)
}
</script>
底层内容JeremyChenX 2013-10-23
- 打赏
- 举报
谢谢啊 哥们,我想自己写一个...
sliwey 2013-10-23
- 打赏
- 举报
百度 jquery弹出层 插件 应该能找到满足你要求的插件
