0

必要なもの: ユーザーがリンクをクリックしたとき、背景を淡色表示にし、データを含むボックスを前景に表示する必要があります

問題: 背景の不透明度は機能していますが、コンテンツに不透明度が適用されています。2番目の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>
4

1 に答える 1

1

背景が画像の場合、それは不可能です。背景画像を透明にする唯一の方法は、png を使用することです。

ただし、無地の場合はrgbaを使用してください。

background-color: rgba(0, 0, 0, 0.6)たとえば、不透明度 60% の黒い背景を作成します。

于 2013-04-29T22:55:02.530 に答える