Set a Gray Transparent Background
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. // Get the...
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 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>
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!
2 Answers
try this one..
<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;
}
working fiddle.. link here
To create a semi-transparent background use rgba() or hsla() functions:
.divCentro {
background-color: rgba(60, 60, 60, 0.5);
}
David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.
