弹出层背景透明度问题...

JeremyChenX 2013-10-23 03:04:25



想做如上的效果.

要求:

1.要适应全部的浏览器

2.可以自由更改透明度及其颜色

在线等...
...全文
645 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
l676331991 2013-10-23
  • 打赏
  • 举报
 回复 1
是的，背景层和弹出层不能是父子关系，否则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
  • 打赏
  • 举报
 回复
引用 14 楼 showbo 的回复:
不能为父子关系。除非你的子为半透明就不会影响父节点，否则返回来不行
嗯,谢谢斑竹,以后有问题,我还得继续请教..
Go 旅城通票 2013-10-23
  • 打赏
  • 举报
 回复
不能为父子关系。除非你的子为半透明就不会影响父节点，否则返回来不行
JeremyChenX 2013-10-23
  • 打赏
  • 举报
 回复
引用 12 楼 showbo 的回复:
[quote=引用 5 楼 NobodyCanHelpMe 的回复:] [quote=引用 3 楼 showbo 的回复:] 
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>
底层内容
当我创建了一个背景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>
[/quote] 其实我就想做两个 div。 一个为透明背景层. 一个为显示层.同时显示层不可以透明.这两个div为父子关系.斑竹大人..
Go 旅城通票 2013-10-23
  • 打赏
  • 举报
 回复
引用 5 楼 NobodyCanHelpMe 的回复:
[quote=引用 3 楼 showbo 的回复:] 
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>
底层内容
当我创建了一个背景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
  • 打赏
  • 举报
 回复
引用 10 楼 zzgzzg00 的回复:
除了css3 用rgba外的话 貌似css2不能的样子
嗯好吧..
似梦飞花 2013-10-23
  • 打赏
  • 举报
 回复
除了css3 用rgba外的话 貌似css2不能的样子
JeremyChenX 2013-10-23
  • 打赏
  • 举报
 回复
引用 8 楼 NobodyCanHelpMe 的回复:
[quote=引用 7 楼 zzgzzg00 的回复:] 第二个div通过定位定位到指定的位置 和第一个一样 只是不要设置透明 而且两个div不要是父子关系 否则第二个div也会透明的
我现在就遇到一个这样的问题...内两个div现在必须是父子关系.并且,子div不可以透明....大神,求指教..[/quote] 而且,背景的透明度是可以指定的...小弟跪谢...
JeremyChenX 2013-10-23
  • 打赏
  • 举报
 回复
引用 7 楼 zzgzzg00 的回复:
第二个div通过定位定位到指定的位置 和第一个一样 只是不要设置透明 而且两个div不要是父子关系 否则第二个div也会透明的
我现在就遇到一个这样的问题...内两个div现在必须是父子关系.并且,子div不可以透明....大神,求指教..
似梦飞花 2013-10-23
  • 打赏
  • 举报
 回复
第二个div通过定位定位到指定的位置 和第一个一样 只是不要设置透明 而且两个div不要是父子关系 否则第二个div也会透明的
JeremyChenX 2013-10-23
  • 打赏
  • 举报
 回复
引用 4 楼 zzgzzg00 的回复:
弹一个div 设置position为absolute/fixed left top bottom right都为0 透明ie用filter:alpha(opacity=50) w3c opacity:.5 颜色改变设置background-color 这些属性都可以通过js设置
问题我还有一个弹出内容的div. 背景是不透明的,我还想放在整个为背景为黑色透明层的里面...
JeremyChenX 2013-10-23
  • 打赏
  • 举报
 回复
引用 3 楼 showbo 的回复:
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>
底层内容
当我创建了一个背景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设置
Go 旅城通票 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
  • 打赏
  • 举报
 回复
引用 1 楼 u011559804 的回复:
百度 jquery弹出层 插件 应该能找到满足你要求的插件
谢谢啊 哥们,我想自己写一个...
sliwey 2013-10-23
  • 打赏
  • 举报
 回复
百度 jquery弹出层 插件 应该能找到满足你要求的插件
java源码包---java 源码 大量 实例
　util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码...
php layer弹出层更改背景,layui.layer 弹出层背景透明，前景无阴影实现方案
首先，在 css 里给 layer 弹出层写个自定义 skin (这点不明白的同学请出门左转 layui 官网文档)：.myskin{background-color:transparent;/*背景透明*/box-shadow:000rgba(0,0,0,0);/*前景无阴影*/}然后，在准备弹出 ...
html+弹出背景透明,jquery弹出层Div背景半透明与内容不透明
例子，jquery弹出层背景半透明。复制代码 代码示例:jquery手写弹出层背景半透明，内容不透明*{ margin:0; padding:0;}.alertDiv,.alertDiv1{ position:fixed; width:100%; height:100%; top:0; color:#fff;}....
Element UI表格和弹出层背景透明
弹出层想自定义头部，可以是用插槽slot，如下面代码第三行。如想element 中的table要背景透明，可以让则需要让背景，行和行对应的每一个单元格都透明。HTML代码： less代码： 效果如下： 能看出背景已经透明了....
layuiadmin layer iframe弹窗 背景透明化
自定义透明度 body .layeriframe { background-color: rgba(255,255,255,0.8); } layui.layer.open({ type:2, skin: 'layeriframe', ......//参数省略 success: function (layero, index) { console.log...
JavaScript

87,907

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章