The transparency of the image remains slightly see-through even after adjusting the opacity value

Functionality:

The current page design includes a translucent background with an opacity of 0.68, and an image placed on top with a full opacity of 1.0. However, the issue arises when the image inherits the transparency property from the background. The goal is to have the image appear solid without any translucency effect.

Solution Sought:

Despite setting the image's opacity to 1.0, it continues to share the translucent property with the background. How can I ensure that the image appears completely solid without displaying the opacity attribute set for the main background?

.BrandMenu {
  background-color: #D3D3D3;
  filter: alpha(opacity=98);
  opacity: 0.98;
}
.BrandDescription {
  background-color: #FFFFFF;
  filter: alpha(opacity=200);
  opacity: 1.0;
}
<div id="Park_BrandDescription" class="BrandMenu" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=9; top:0px; margin:auto;">

  <img id="Pa_Description" class="BrandDescription" style="position:absolute; width: 1080px; height:650px; top:500px; background-color: white; left:0px; z-index=99;">
</div>

htmlcssopacity

Answer №1

The solution provided by @eisbehr clarifies the method to achieve a translucent background using rgba() values while preserving the opacity of child elements:

.BrandMenu {
  background-color: rgba(211, 211, 211, 0.98);
}
.BrandDescription {
  background-color: #FFFFFF;
}
<div id="Park_BrandDescription" class="BrandMenu" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: block; top:0px; margin:auto;">

  <img id="Pa_Description" class="BrandDescription" style="position:absolute; width: 1080px; height:650px; top:500px; background-color: white; left:0px;" src="http://lorempixel.com/400/200">
</div>

In relation to the opacity level, it's essential to note that the maximum value for opacity in CSS is 1.0 representing 100% opacity.

Answer №2

It's impossible to achieve full visibility for an element using the opacity property if its parent elements are not fully visible. Opacity is always calculated relative to the parent elements, with a maximum value of 1.0. Consider this scenario:

<div style="opacity: .5;">
  This text here has an opacity of 50%!
  <div style="opacity: .5;">
    This text here has an opacity of 25%!
    <div style="opacity: .5;">
      This text here has an opacity of 12.5%!
      <div style="opacity: 1;">
        This text here still has an opacity of 12.5%!
      </div>
    </div>
  </div>
</div>

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

The functionality of the localStorage HTML5 feature is experiencing issues within the WebView on Samsung Android devices

I am currently facing an issue with my HTML5 application which I am wrapping with a WebView. In order to store and retrieve user input values between pages, I have been utilizing the localStorage feature in HTML5. Interestingly, this feature functions per ...

androidhtmlwebviewlocal-storagesamsung-mobile

Modifying the background color using highcharts.js

I am attempting to customize the background colors of a highcharts scatter plot. While I can easily change the color of a specific section using the code provided, my goal is to apply multiple colors to different ranges within the same plot. Specifically, ...

javascriptjqueryhtmlcsshighcharts

Leveraging weather application programming interfaces

I am trying to set up a basic webpage that can display tide information from wunderground.com. However, for some reason I am not seeing any results on the page. I have included the load function in hopes of at least getting something to appear when the p ...

javascriptjqueryhtmljsonapi

How to effectively eliminate the border of a single cell within a Bootstrap Table

Is there a way to remove the border of a single cell in a bootstrap table without affecting the others? I attempted using an id on that specific cell and adding the following CSS code: #borderless-cell { border: 0; } Unfortunately, this solution doesn&ap ...

htmlcssangulartwitter-bootstrapangular-ui-bootstrap

Manipulate sibling elements using jQuery's addClass and remove methods

I have implemented a function that adds the class active to elements when they reach the top of the browser, ensuring that the next element will scroll in over the top. While this works smoothly in Chrome, I am encountering some jumping behavior when testi ...

javascriptjqueryhtmlcss

"Utilizing an ellipsis within a span element in a table cell to achieve maximum cell

Update Note: Primarily targeting Chrome (and maybe Firefox) for an extension. However, open to suggestions for a universal solution. Additional Information Note: Discovered that lack of spaces in text for A causing overflow issues with B. Situation seem ...

htmlcss

No matter what I try, connecting the CSS file to my HTML file just won't seem to work

I've been attempting to connect a CSS file to my HTML index file, but I can't seem to get it to work no matter what I try. I'm using VSCode. When typing the link from scratch, it auto-completes or shows up, indicating that it recognizes it. ...

htmlcss

Is it necessary to include the 'html' and 'body' tags in a WordPress Page Template?

Currently, I'm in the process of creating a unique Page Template for my WordPress website. In the file named newpagetemplate.php, I have included only this code: <html> <body> <?php /* Template Name: CustomPage */ ?> <div> ...

htmlwordpresswordpress-theming

Tips for making search results stand out

Hey there! I've got a search function set up to look for keywords in a database. I'm interested in highlighting those keywords and found a second function that I want to integrate into my search function. This is the current code for the search: ...

phpmysqlhtmlfunctionsyntax-highlighting

Changing from a vertical to horizontal menu as the parent div is resized

I am looking for a solution to create a CSS effect or Javascript code that will hide a menu inside a div when the browser window or parent div is resized. I want to display another div with the same menu in horizontal orientation when the first one is hidd ...

javascriptjquerycssresizemedia-queries

how to show an error in a modal window when encountering an error

Using Blazor and Blazorstrap, typically when the server disconnects, an "Error" message is displayed. However, with the BsModal from Blazorstrap, it appears in the background layer, making it unresponsive. How can this be fixed? Is it possible to close the ...

javascriptcssbootstrap-4blazor-server-side

When a specific height threshold is surpassed, the sticky element loses its stickiness

Having trouble with implementing a sticky header? Here's a simplified version of the code: HTML: <div class="page"> <div class="header"> kkk </div> <div class="nav"> kkk </di ...

htmlcsspositioncss-gridsticky

What steps can be taken to resolve the error message "AttributeError: 'WebElement' object does not have the attribute 'find_element_class_name'?"

try: main = WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.ID, "main")) ) articles = main.find_elements_by_tag_name("article") for article in articles: header = article.find_element_c ...

javascriptpythonhtmlseleniumselenium-webdriver

Why has my dropdown menu decided to go horizontal, rather than dropping down as it should?

Hi there! I'm new to css and tried following a tutorial with some tweaks. However, when adding a drop down menu using lists, it ended up going sideways instead of downward. Can anyone help me out? I also would like to have a collapsible menu implemen ...

htmlcssdrop-down-menu

Deactivate a div based on a Razor variable in ASP.NET MVC4

Is there a secure method to disable a div based on a Razor variable in ASP.NET MVC 4.0? I attempted using a CSS class, but it was easily bypassed with developer tools. .disableddiv { pointer-events: none; opacity: 0.4; } Any advice on how to effectively ...

jquerycssasp.netasp.net-mvcserver-side-validation

The CSS3 animations are lightning quick and the background image appears slightly unsteady

Is there a way to slow down the background change and stop it from shaking too fast? If so, please help me with this. HTML <!-- Banner --> <section id="banner"> <div class="inner"> <h2>Enhancing Your <br />Ways&l ...

htmlcsscss-animations

What causes a 404 error when a GET response is returned in a Node.js server?

Having some issues with my server setup. I have a server.js file running on node js. When I try to access the CSS and JS files linked in my index.html, I keep getting 404 errors even though the files are present in the specified path. I suspect there might ...

javascriptcssnode.jsexpress

How can I verify the number of completed form fields?

I seem to be facing a minor issue: I have a webpage where users can input information into up to 10 fields. However, they are not required to fill out all 10 fields. Initially, the user is presented with only one field, and they have the option to add mor ...

javascripthtmllogic

Placing a user's username within an ejs template using express and node.js

Currently, I am attempting to integrate the username into a layout using ejs templating with node and express. Below are the steps I have taken: Mongodb model: const mongoose = require('mongoose') const Schema = mongoose.Schema; var uniqueValid ...

javascripthtmlnode.jsexpressejs

How can I use PHP to send the user to another PHP file?

After searching for answers with no luck, I ended up coming here to ask my question. Here is the code snippet in question : <a href="manage/10000' . $user["user_id"] . ' " class="user_grop">More Info</span></a> I am wondering ...

phphtmlhttp-redirect