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％不透明度的黑色背景。

制作一个弹出框，同时调暗背景

1 个答案: