CSS - Layering <divs> on top of clear <div>'s

Is there a method to eliminate the transparency of content/images within a <div> that is transparent?

Below is the provided HTML:

    <div id="main-button-wrapper" class="left">

        <div id="button-bg-layer" class="box-bg-layer corners"></div>

        <div class="buttons-bg-overlay box-bg-overlay corners">

            <img alt="Test" src="http://www.schroff.co.uk/railway/src/symbol_test.gif" />

        </div>

    </div>

CSS:

#main-button-wrapper {
    height: 319px;
    margin-left: 22px;
    position: relative;
    width: 321px;
}

#button-bg-layer {
    position: absolute;
    right: 0;
    height: 319px;
    width: 321px;
}

.buttons-bg-overlay {
    position: relative;
    right: 0;
    margin: 11px;
    height: 66px;
    width: 299px;
    text-align: center;
    padding-top: 26px;
}

#buttons-wrapper {
    position: relative;
    width: 299px;
    height: 297px;
    z-index: 3;
    margin: 22px;
}

/* Background Layers */

.box-bg-layer {
    background-color: #010101;
    z-index: 1;
    zoom: 1;
    filter: alpha(opacity=40);
    opacity: 0.4;   
}

.box-bg-overlay {
    background-color: #010101;
    z-index: 2;
    zoom: 1;
    filter: alpha(opacity=40);
    opacity: 0.4;   
}

I have experimented with adding a z-index: 4; on the image. Another solution I considered was setting the div backgrounds as absolute positioning, then moving the content outside of the div, but I believe there must be a simpler approach.

Your assistance on this matter would be greatly valued!

Feel free to view the JSFiddle example:

http://jsfiddle.net/Sa8jw/

htmlcss

Answer №1

Instead of relying on the opacity property, consider using rgba where the a represents the alpha channel. By using this approach, you can ensure that child elements are not transparent...

background-color: rgba(0,0,0,.5); /* Consider using RGBA to achieve a similar effect as opacity */

For instance, setting .4 for a is akin to applying opacity: 0.4

Check out this demo

Answer №2

Check out this helpful js fiddle for reference :-)

FIDDLE

Here is the modified code snippet where opacity is applied to a pseudo class:

    #main-button-wrapper {
    height: 319px;
    margin-left: 22px;
    position: relative;
    width: 321px;
}

#button-bg-layer {
    position: absolute;
    right: 0;
    height: 319px;
    width: 321px;
}

.buttons-bg-overlay {
    position: relative;
    right: 0;
    margin: 11px;
    height: 66px;
    width: 299px;
    text-align: center;
    padding-top: 26px;
}

#buttons-wrapper {
    position: relative;
    width: 299px;
    height: 297px;
    z-index: 3;
    margin: 22px;
}

/* Background Layers */
.box-bg-layer{
background-color: #010101;
    z-index: 1;
zoom: 1;}
.box-bg-layer : after{

    filter: alpha(opacity=40);
    opacity: 0.4;   
}
.box-bg-overlay {   background-color: red;
    z-index: 2;
    zoom: 1;
}
.box-bg-overlay :after{
    filter: alpha(opacity=40);
    opacity: 0.4;   
}

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

Elevate the Appearance of Material UI Elements with custom CSS Sty

I am currently facing an issue while trying to customize the styling of a Material UI component using CSS. Here is the code snippet: <IconButton className="my-class"> <Close /> </IconButton> CSS: .my-class { float: right ...

cssreactjstypescriptmaterial-ui

Unable to transition slides in AngularJS on Safari iOS 9 due to malfunctions

Having some CSS classes that smoothly slide my ng-view left and right during route change, everything was working well on most browsers and phones until now. Under ios 9, the animation is not functioning properly. Instead of sliding left to right, the view ...

ioscssangularjsmobile-safariios9

"Eliminate any inline styling from a string element with the power of JavaScript/j

If I have the following string: let sentence = '<h1 style="lots of class"> </h1><h2> <p style="bunch of class"> </p> <p style="bunch of class"> </p></h2>'; This string contains multiple elements a ...

javascriptjqueryhtmlregex

Sending authorization codes to web pages

I have developed a user authentication system that generates an access token after successful login. The challenge I am facing is passing this token to different pages as a header parameter in order to grant access to those pages. module.exports.authen ...

htmlnode.js

What is the best way to create a fixed footer in Next.js using React?

I'm looking to create a fixed footer that will stay at the bottom of the page if there isn't enough content to fill it. I've been researching ways to achieve this using CSS, but many of the methods don't easily translate to React/Next.j ...

javascripthtmlcssreactjsnext.js

The table's pagination displays above, thanks to Tailwindcss

I'm facing an issue where the pagination is showing up above the table, but I was expecting it to be displayed after the table. It would be ideal if the pagination appeared right after the table when adding multiple rows. Check this link for more inf ...

htmlcsstailwind-css

Tips for preventing the automatic insertion of tbody tag by Firefox?

My webpage is being rendered client-side using XSL and XML sent by the server. I'm encountering a problem with Firefox adding an implicit tbody tag. The issue arises because my XSL generates certain tbody tags based on certain conditions. However, Fi ...

htmlfirefoxxslthtml-table

Utilizing an array of font styles in a single line while maintaining a consistent width

I am creating a simple webpage with fixed width text. Check out this sample HTML: <div id ="wrap"> <h1>An Annoying Heading</h1> <p>Some text some text some text some text some text some text some text some text some text so ...

htmlcss

The element is not occupying the full width within the div container

I'm working with a div that contains some elements. My goal is to have these elements span the entire width of the container div. .container { height: 100px; width: 100px; display: flex; flex-direction: column; overflow: scroll; borde ...

htmlcss

I am looking for guidance on removing the bottom line from the ionic 4 segment indicator. Any advice or tips on

.segment-button-indicator { -ms-flex-item-align: end; align-self: flex-end; width: 100%; height: 2px; background-color: var(--indicator-color); opacity: 1; } I am a beginner in hybrid app development and ...

htmlcsstypescriptionic-frameworksass

Exploring the distinction between absolute elements nested within other absolute elements and relative elements nested within absolute elements

My latest CSS experiment involved creating a flag of a country. Check out my code: div.flag { width: 900px; height: 600px; background-color: red; position: relative; } div.flag > div { position: absolut ...

htmlcssweb

Ways to confirm the validation of radio buttons in a form and implement CSS

I am having trouble adding validation to a form with radio buttons displayed as labels. I want to show a red border around the radios/labels or outer div when a radio button hasn't been checked before the user submits the form. I have attempted this ...

javascripthtmljquerycssforms

How to perfectly align squares in CSS Grid

I'm working on arranging four squares in a grid pattern, two on top and two on the bottom, with equal spacing between them. Currently, the squares shift based on the fr value in CSS grid, resulting in uneven spacing like this: I want to align all fou ...

htmlcsscss-gridcentering

Adjusting the empty image source in Vue.js that was generated dynamically

Currently experimenting with Vue.js and integrating a 3rd party API. Successfully fetched the JSON data and displayed it on my html, but encountering issues with missing images. As some images are absent from the JSON file, I've saved them locally on ...

javascripthtmlvue.jsvuejs2vue-component

Preserving form POST information between form handler and header invocation

I've hit a roadblock with this issue and could use some assistance. Thank you in advance for any help. I have a form on a page (guest/build.php) that contains several radio buttons: <form action="../php/build.php" method="POST"> <table class ...

phphtmlpost

Encountering a problem while attempting to save a scss file in Visual Studio Code

As a beginner in using sass, I decided to utilize the node-sass NPM package for compiling scss files into CSS format. Upon saving the file, I encountered the following error: { "status": 3, "message": "Internal Error: File to ...

cssnpmvisual-studio-codesass

Having trouble with your jQuery image slider?

As a newcomer to jQuery, I have been experimenting with it to gain some experience. I recently tried to integrate a jQuery image slider from slidesjs.com into my local website but unfortunately, it is not functioning as expected. Additionally, I would lik ...

javascriptjqueryhtmlcss

Background positioning in IE8 does not display as intended

I'm experiencing an issue with the image background not displaying in IE8. You can view the page here, and the arrows on the accordion are not visible. Here is the CSS: .closed h2.accordion_h3 { background: url(mysource_files/down.png) no-rep ...

cssinternet-explorerbackgroundinternet-explorer-8

Is there a competitive edge in defining Css Selector with symbols versus without symbols in Selenium Test Automation?

When it comes to Test Automation, CSS is used to define page elements. There are two ways to define a sample page element: element :fld_page_element, "#uniqueID .some-class-name" OR, element :fld_page_element, "[id='uniqueID'] [class='som ...

javacssrubyselenium-webdriversite-prism

What is the best way to delete the onclick event of an anchor element?

Struggling to remove the onclick attribute using jQuery? Here's my code: function getBusinesses(page){ if(page==0){ alert("you are already on First Page"); $("#previous a").removeAttr("onclick ...

javascriptjqueryhtml