1. ホーム
  2. css

[解決済み] グレーの透明な背景を設定する

2022-02-05 06:47:33

質問

ハローフレンド 処理画像を表示するコードがあるのですが、背景の色が変わってしまうので、グレーに変更する必要があります。

<body>
<form id="form1" runat="server">
<div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
     <script type="text/javascript">
         // Get the instance of PageRequestManager.
         var prm = Sys.WebForms.PageRequestManager.getInstance();
         // Add initializeRequest and endRequest
         prm.add_initializeRequest(prm_InitializeRequest);
         prm.add_endRequest(prm_EndRequest);

         // Called when async postback begins
         function prm_InitializeRequest(sender, args) {
             // get the divImage and set it to visible
             var panelProg = $get('divImage');
             panelProg.style.display = '';
             // reset label text
             var lbl = $get('<%= this.lblText.ClientID %>');
             lbl.innerHTML = '';

             // Disable button that caused a postback
             $get(args._postBackElement.id).disabled = true;
         }

         // Called when async postback ends
         function prm_EndRequest(sender, args) {
             // get the divImage and hide it again
             var panelProg = $get('divImage');
             panelProg.style.display = 'none';

             // Enable button that caused a postback
             $get(sender._postBackSettings.sourceElement.id).disabled = false;
         }
     </script>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Label ID="lblText" runat="server" Text=""></asp:Label>
            <div id="divImage" style="display:none" class="divCentro">
                <div class="FondoGris">
                     <asp:Image ID="img1" runat="server" ImageUrl="~/Procesando2.gif"/>
                    </div>
                <br />
                 <p class="divCentro"><br /><br /><br />Processing...</p> 
            </div>                
            <br />
            <asp:Button ID="btnInvoke" runat="server" Text="Click"
                onclick="btnInvoke_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
</form>

そして、以下がCSSのコードです。

<style type="text/css">
    .divCentro {
        text-align:center;
        width: 327px; height: 60px; margin-top: -23px; margin-left: -158px; left: 50%; top: 40%;    position: absolute;
    }

</style>

background-color: gray transparent と書いてみましたが、divの画像の色が変わるだけです。

もし、どなたかご提案がありましたら、よろしくお願いします。

ありがとうございました。

どのように解決するのですか?

これを試してみてください。

 <div class="divOuterCentro">
 <p class="divCentro"><br /><br /><br />Processing...</p>
 </div>

CSSです。

.divOuterCentro{
   height:100%;
   width:100%;
   background-color:rgba(0,0,0,0.4);
   position:absolute;
 }
 .divCentro {
    text-align:center;
    width: 327px; 
    height: 60px; 
    margin-top: -23px; 
    margin-left: -158px; 
    left: 50%; 
    top: 40%;    
    position: absolute;
}

ワーキングフィドル... リンクはこちら