Member Avatar for while(!success)

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.

  • 3 Contributors
  • 8 Replies
  • 259 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by while(!success)
Member Avatar for TonyG_cyprus

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>
Member Avatar for while(!success)

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

Member Avatar for TonyG_cyprus

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{};
Member Avatar for while(!success)

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.

Member Avatar for TonyG_cyprus

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

Member Avatar for while(!success)

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.

Member Avatar for pixelsoul

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

Member Avatar for while(!success)

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!

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.