Hello friends I have a code that show a processing image, but I don't get that the background change its color, I need to change it to gray color.
<body> <form runat="server"> <div> <asp:ScriptManager 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 runat="server"> <ContentTemplate> <asp:Label runat="server" Text=""></asp:Label> <div> <div> <asp:Image runat="server" ImageUrl="~/Procesando2.gif"/> </div> <br /> <p><br /><br /><br />Processing...</p> </div> <br /> <asp:Button runat="server" Text="Click" onclick="btnInvoke_Click" /> </ContentTemplate> </asp:UpdatePanel> </div> </form> And here is the css code:
<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> I've tried writing background-color: gray transparent but this only change the color in the div image.
If anyone has any suggestion please help me.
Thanks in advance!
22 Answers
try this one..
<div> <p><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; } working fiddle.. link here
To create a semi-transparent background use rgba() or hsla() functions:
.divCentro { background-color: rgba(60, 60, 60, 0.5); } 
