Problem with the transparency of CSS, div, and asp:Image

I am facing an issue with a div that has its opacity set to 60. Within this div, there is an asp:Image element. It seems like the opacity of the div is also affecting the image inside it. I attempted to create a separate class for the image and adjust the opacity to 100, however, this approach did not produce the desired result. Can anyone offer a solution?

<div id="PleaseWait" class="Splash">
    <asp:Image ID="Logo" runat="server" ImageUrl="logo.png" CssClass="imgOpac" />

<div style="color: White; font-size: medium;">
    Please wait, searching spectrum listings ...</div>
</div>

<style id="splash" type="text/css">
    .Splash
    {
        padding-top:200px;
        display: none;
        text-align: center;
        color: White;
        vertical-align: top;
        width: 100%;
        height: 100%; 
        filter:alpha(opacity = 60);
        -moz-opacity:0.6;
        background-color:#000000;
        position:absolute;
        z-index:500;
        top:0%;
        left:0%;
    } 
    .imgOpac
    {
        filter:alpha(opacity = 100);
        -moz-opacity:1.0;
    }
    </style>
asp.netcss

Answer №1

It is the way css inheritance functions. The image inherits its opacity value from the parent div, so even if it is set to 100%, it will still be at 60% of the inherited opacity.

You can find a solution by visiting and checking out the workaround provided (view source). Essentially, you need to stack the elements, placing the one with opacity below the one without for it to work properly.

Answer №2

Give this a shot:

.Main .bgOpacity
{
    filter:alpha(opacity = 100);
    -moz-opacity:1.0;
}

This should take precedence over the Main class.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to arrange objects to fill up space in a specific sequence

My HTML document contains two child HTML elements within the parent HTML. The parent HTML has a div with a class of .page, which is a large area for the children to occupy. Both children are of the same size and I need them to spawn in a specific order; fo ...

htmlcssangularcss-grid

What's the reason the bootstrap tooltip style isn't displaying?

Seeking assistance with styling text in a bootstrap tooltip. My request is straightforward: I would like the text in the tooltip on the first button to be displayed in red color. I have used data-html="true" attribute to allow HTML in the tooltip. Howev ...

javascriptjquerycssbootstrap-4tooltip

Learn the method to conceal rows within a table simply by toggling a button

I need a function that will hide the rows below a row with a header and button, and only reveal them when another row with a header and button is clicked. When one of the +/- buttons is clicked, it should hide or expand all the rows with data content. http ...

javascripthtmljquerycss

Issues with PHP Form Email DeliveryIt seems that there is a

I currently have a ready-made form that is constructed using html, css, jquery, and ajax. It's basically copied and pasted onto my contact page for now. This is the code I include before the html tag on the contact.php page. <?php session_name(" ...

phpjqueryhtmlcssforms

Using CSS, the ability to scroll to the top of a page is restricted when an inner div expands to the top while using flex

While following a tutorial on YouTube, I encountered an issue where my expanding content, when exceeding the size of the window in a small screen view, prevented me from scrolling to the top. Interestingly, I could scroll to the bottom and back up to that ...

htmlcssflexbox

I am implementing a solution in asp.net that involves using two nested forms, however, I am encountering an issue

I have two forms set up like this, one for selecting a category so that the books related to that category will be displayed below. Each book has a modal form for borrowing from the library. However, I am facing an issue where the modal form can open but c ...

c#asp.net.netasp.net-core

Is it possible for me to customize the outcomes when inheriting from a web service (WSE)?

Currently, I am working with a WSE web service that provides me with a list of items stored in a collection. My requirement is to modify specific items in the collection that meet a specific regex pattern. Unfortunately, I do not have access to the sourc ...

c#asp.net.netweb-services

How can we effectively override the automatic contrasting color determination of buttons based on their background in Boostrap v5.2 SCSS compilation?

Buttons in Bootstrap v5.2 dynamically adjust the text color based on the button color. Currently, I am modifying the bootstrap variables override file to change the primary color for my custom theme $green: #369d6d !default; $primary: $green !default; Ho ...

csstwitter-bootstrapsassbootstrap-5

Removing the blue border around a button upon being clicked

Whenever I press my button, an unexpected event occurs. Is there a solution to avoid this issue? Thank you for your help! :) ...

htmlcssstyles

links to css and javascript

I am having trouble with what should be a simple task! On my webpage, I have this link: <a class='action' href='javascript:void(0)' OnClick='run()'> run </a> Along with the following CSS: .action { color: # ...

javascripthtmlcss

Getting the value from a dropdown menu and displaying it in a text area

I have 3 functions (radio, textarea, and dropdown) I was able to successfully retrieve the values of radio and textarea into the textarea. However, the drop down functionality is not working as expected. My goal is to display the selected option from the ...

javascriptjqueryhtmlcssbootstrap-4

Dynamically linking tabbable tabs is a useful technique that allows for

I have been working on an app that organizes websites into groups displayed as tabs in a tabbable navigator using Twitter Bootstrap. The idea is that each time a new group is added, a new tab should appear. Currently, this is how it looks: The functionali ...

javascripthtmlcsstwitter-bootstrapangularjs

Hover effects on the navigation bar combined with an image featuring a sub navigation menu

Looking to craft a dynamic navigation bar that switches out subcategory images on hover. (subcategories come pre-loaded with images) ...

jquerycsshtml

Using the paragraph element within a flexbox forces the parent element to expand to the full width

I am attempting to design a straightforward layout where a heading, paragraph, and button are centered both horizontally and vertically on the page. My goal is for the .centered-div to match the width of the .heading. The issue arises when the paragraph t ...

css

Guide to placing a heading in one corner and a button in the opposite corner

Desired Outcome: I am aiming to achieve a design similar to the one shown in the image below. https://i.sstatic.net/7AbdL.png Actual Result: However, what I ended up with looks more like the image below. https://i.sstatic.net/nrQZf.png This is my HTML: & ...

htmlcsstwitter-bootstrap

The input field within the mat-form has been styled to match the background of the page using CSS

I am currently facing an issue with the code below: Html: <form fxLayout="column" fxLayoutAlign="center center" [formGroup]="deleteForm" (ngSubmit)="onSubmitForm()"> <mat-form-field color="accent" appearance="outline"> <input ...

htmlcssangular-material

Modify the color of the back button arrow in Ionic 3

Is it possible to change the color of the back button in Ionic 3 from white to black? Here's a screenshot showcasing the button: https://i.sstatic.net/VNgPd.png ...

cssionic-frameworksassionic2ionic3

Is Span responsible for creating a new line in this particular sentence?

I am struggling with aligning the following line of text that includes percentages like 100% and 99.8%. Is there a way to display all these elements in one line, side by side? <span style="font-size:12px;font-weight:bold;padding-left:800px;">99%& ...

htmlcssjsp

When trying to load an ASPX file with jQuery UI Tabs, pressing the ASP button results in an error message saying "page not found."

I am a newcomer to the world of jQuery and AJAX, facing an issue with implementing jQuery UI tabs. The problem arises when I load separate .aspx pages into each tab and try to carry out regular processing tasks without reloading the entire page. Currently, ...

asp.netjquery-uijqueryjquery-ui-tabs

Centered div's overflow remains visible

Yes, the positioning of the parent container is set to relative. I am attempting to achieve a ripple effect by expanding multiple circles from a central point in all directions until they stretch beyond the viewport. I have created circular divs that are ...

htmlcssoverflow