Transparent block under Non transparent table

Question

while(!success) 0 Newbie Poster

13 Years Ago

Hey guys,

I'm still in the process of learning css and I'm having issues with opacity/transparency. I have a login page with a background image. What I am trying to accomplish is to have the login elements not be transparent but sit on top of a transparent div so the user may still be able to see the background image while having a distinction of where the login form is.

the markup resembles something like this:

<body><!--background image-->
    <form class="formform"><!--want form background to be transparent-->
        <div>
            <table><!--Don't want table to be opaque-->
            </table>
        </div>
    </form>
</body>

the css resembles this:

body
{
    font-family: verdana,helvetica,sans-serif;
    font-size: 10pt; 
    text-align:left;
    color:black;
    margin-top:-1px;
    background:url('/Images/blahblah.jpg') no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

form.formform   
{
    width:1000px;
    height:inherit;
    margin:30px auto;
    background-color:#E8E8E8;
    padding:20px;
    border-top-left-radius:12px;
    border-top-right-radius:12px;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
    opacity:.7;
}

The problem is the table of course inherets the traits of formform and everything in the table becomes opaque as well. How do I prevent this? How do I have the outer grey of the form be transparent, but have the table and all its contents be non transparent? Thanks for your help.

html-css web-design

3 Contributors
8 Replies
282 Views
3 Days Discussion Span
Latest Post 13 Years Ago Latest Post by while(!success)

Dani AI

Generated 9 Months Ago

The behavior comes from using the CSS opacity property: it does not "inherit" in the usual sense but causes the element and all its descendants to be composited together with that transparency. That is why putting opacity:0.7 on the form makes the table and inputs look translucent. Two cleaner options avoid that problem while keeping the translucent panel effect.

Use an alpha background color (no opacity) so only the background is translucent:

.login-card {
  position: relative;
  width: 1000px;
  padding: 20px;
  background-color: rgba(232,232,232,0.7); /* translucent background only */
  border-radius: 12px;
}

Or create a separate translucent layer (pseudo-element) behind the content — this is equivalent to the wrapper + z‑index approach but keeps the markup simpler:

.login-card { position: relative; border-radius: 12px; overflow: hidden; }
.login-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.25); /* or use a light rgba for a grey wash */
  z-index: 0;
  pointer-events: none;
}
.login-card > * { position: relative; z-index: 1; } /* place real content above overlay */

Notes and quick tips: opacity creates a new stacking/compositing context, so switching to rgba() or an overlay avoids affecting children. pointer-events: none lets clicks pass through an overlay. For very old browsers that lack rgba() support, a semi‑transparent PNG background is a valid fallback (as suggested by ). The wrapper + z‑index solution used by is functionally correct; ’s classing idea helps organization but won’t override a parent’s opacity. Also check color contrast to keep the form readable over the background image.

All 8 Replies

TonyG_cyprus 36 Newbie Poster

13 Years Ago

Give the table a class and style it accordingly.

<style>
.tables{
     border:#0920D6;
     border-collapse:collapse;
     text-align:left;
}
</style>


<table class='tables'>
<tr>
<td></td>
</tr>
</table>

TonyG_cyprus 36 Newbie Poster

13 Years Ago

I'm having a small problem here with your wording. Opaque is non see-through,
transparent is see-through, which is which here?
And line 15, take out the first 'form'

.formform{};

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

while(!success) 0 Newbie Poster · Answer 1 · 2013-03-26T04:57:50+00:00

TonyG,

Thank you for the reply! I have considered and applied your suggestion, but unfortunately all the controls in the table cells are still opaque/transparent. Is what I am trying to do possible? Considering the div inherets the opacity from the parent div that it is encompassed in, is there a way to NOT inheret the opacity trait from the parent?

Thanks

while(!success) 0 Newbie Poster · Answer 2 · 2013-03-27T17:09:42+00:00

TonyG,

Sorry for the confusion; what I am trying to convey is that I want the form to be see through and the table and all its contents to be non see through. I hope this clarifies things for you. I think I got the wording between transparent/opaque confused.

TonyG_cyprus 36 Newbie Poster · Answer 3 · 2013-03-27T18:07:20+00:00

Try this

body
{
    font-family: verdana,helvetica,sans-serif;
    font-size: 10pt; 
    text-align:left;
    color:black;
    margin-top:-1px;
    background:url('/Images/blahblah.jpg') no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.formform   
{
    width:1000px;
    height:inherit;
    margin:30px auto;
    background-color:#E8E8E8;
    padding:20px;
    border-top-left-radius:12px;
    border-top-right-radius:12px;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;

}
.tables{
    border:#0920D6;
    border-collapse:collapse;
    text-align:left;
    background-color:#cecece;
    opacity: 0.6;
    }




<body>
    <form class="formform">
        <div>
            <table class="tables">
               <tr>
                 <td></td>
               </tr>
            </table>
        </div>
    </form>
</body>

make sure to take out the first 'form' from the css as above

while(!success) 0 Newbie Poster · Answer 4 · 2013-03-28T04:00:03+00:00

No, still no go. Is it possible to create a div on its own that's see through and position my table on top of that div so that it wouldn't inherit the see through properties? For instance:

<div class="seeThroughClass"></div>

<form class="notSeeThroughClass">
    <table>
    </table>
</form>

so I would position the see through div where I want it and then position the form on top of it. This way the form is not inside the div and thus won't inherit its css properties. Thanks again TonyG, I appreciate the help.

pixelsoul 272 Red Pill Featured Poster · Answer 5 · 2013-03-28T04:14:35+00:00

If I were doing this I would probably use a tranparent png. I like the idea of using CSS for it, but like the problem you are running into, the other elements inheriting the CSS can be a pain. Also, I believe more browsers support transparent png than transparency set through CSS.

I used a transparent png on my temporary page for my site http://www.pixelsoul.com

while(!success) 0 Newbie Poster · Answer 6 · 2013-03-28T06:11:30+00:00

I figured it out. It took some research and a bit of tinkering around, but i created a wrapper div to hold both the opaque div and the non opaque form.

the markup was as such:

<div class="wrapper">
    <div class="transparent"></div>
    <form class="notTransparent">
        <table>
        </table>
    </form>
</div>

The wrapper class in this instance is used to hold the div and the form. I positioned the div with the class transparent where I wanted it and gave it the opaque property. Next, I used the class notTransparent to position it in the same spot at the transparent class. I gave the notTransparent a greater z-index than the transparent class a voila! No inheritance and the form and all its contents are not transparent but are layered of a transparent div!

Thanks guys!

Transparent block under Non transparent table

Dani AI

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers