gigaboy Posted March 7, 2017 Share Posted March 7, 2017 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"> <img class="w3-black img-margins" src="//bonus-udll.imgix.net/rosemarieMarkKeiko-cropped.jpg?w=302" alt="Rosemarie Rossetti, Ph.D., Mark Leder, and Keiko"> </div> Thanks! Mark Link to comment Share on other sites More sharing options...
Ingolme Posted March 7, 2017 Share Posted March 7, 2017 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 comment Share on other sites More sharing options...
dsonesuk Posted March 7, 2017 Share Posted March 7, 2017 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 comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now