css - 制作弹出框，同时调暗背景

Question

需要什么:当用户点击链接时，背景必须变暗，前景中应显示一个包含一些数据的框

问题:背景上的不透明度有效，但内容应用了不透明度；我试图为第二个 div 设置 100% 不透明度，但它似乎不起作用。

            <style>
                .displaybox {

                    z-index: 10000;
                    filter: alpha(opacity=50); /*older IE*/
                    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
                    -moz-opacity: .50; /*older Mozilla*/
                    -khtml-opacity: 0.5;   /*older Safari*/
                    opacity: 0.5;   /*supported by current Mozilla, Safari, and Opera*/
                    background-color:grey;
                    position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;

                }

               .displaybox_content{

                    filter: alpha(opacity=100); /*older IE*/
                    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /* IE */
                    -moz-opacity: 1; /*older Mozilla*/
                    -khtml-opacity: 1;   /*older Safari*/
                    opacity: 1;   /*supported by current Mozilla, Safari, and Opera*/

                    position:fixed;
                    z-index: 1001;
                    top:50%; 
                    left:50%; 
                    width:947px; 
                    height:566px; 
                    margin-top: -288px; /* set to a negative number 1/2 of your height*/
                    margin-left: -473px; /* set to a negative number 1/2 of your width*/
                    background-image: url(images/bg3.png);
                }
            </style>

            <script>
                function clicker(){
                    var thediv=document.getElementById('displaybox');
                    if(thediv.style.display == "none"){
                        thediv.style.display = ""; 
                    }else{
                        thediv.style.display = "none";
                        thediv.innerHTML = '';
                    }
                    return false;
                }
            </script>

            <div id="displaybox" class ="displaybox" style="display: none;">  
                <div id="displaybox_content" class ="displaybox_content"></div>
            </div>

<a href='#' onclick='return clicker();'>Open Window</a>

Answer 1

如果你的背景是图片，那是不可能的。 拥有透明背景图像的唯一方法是使用 png。

但是如果是素色，就用rgba。

background-color: rgba(0, 0, 0, 0.6) 将生成例如不透明度为 60% 的黑色背景。