Jump to content

w3-opacity problem

Recommended Posts

I have a box overlayed on a background image. The overlay container has an image. When the image is placed on top of the overlay, the image is made transparent to the same opacity of the overlay. I've tried to use w3-opacity-0 to correct this, without success.


You can view the page in question here: https://bonus.udll.com (left dark box, look at the picture of the free chapter)>


<div class="w3-cell w3-margin-0 w3-black w3-opacity-min w3-text-white w3-padding-large w3-mobile w3-center block-width">

class="w3-black img-margins"
alt="Rosemarie Rossetti, Ph.D., Mark Leder, and Keiko">
Link to post
Share on other sites

Opacity is an inherited property, the opacity of an element is relative to the opacity of its parent.


You should not set the opacity of the parent, instead use an rgba color for the background and use transparent pngs for any background images.

Link to post
Share on other sites

OR you could add a container:using ::before with content: to apply the transparent colour to

.w3-cell.w3-margin-0.w3-black.w3-opacity-min.w3-text-white.w3-padding-large.w3-mobile.w3-center.block-width {
    position: relative;

.w3-cell.w3-margin-0.w3-black.w3-opacity-min.w3-text-white.w3-padding-large.w3-mobile.w3-center.block-width::before {
    background-color: #000;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0.75;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;

Might be better to give this a specific class to apply this though.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...