Welcome to Dream.In.Code
Getting Help is Easy!

Join 132,449 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,486 people online right now. Registration is fast and FREE... Join Now!




Opaque background

2 Pages V  1 2 >  
Reply to this topicStart new topic

Opaque background, seeing text with bg being transparent

Sirizz
post 26 Jul, 2005 - 07:31 AM
Post #1


New D.I.C Head

*
Joined: 26 Jul, 2005
Posts: 4

Hi everyone,

Got a problem here. I got some tables with a backgroundcolor. Now I want those tables to be transparent, so I can see the background image through. But I have to see the text too, so the text can't be transparent.

Does someone know how I can do this? Cause I've been looking for ages to find it.

I would really appreciate some help. Thx in advance!

Grtz
User is offlineProfile CardPM

Go to the top of the page

Nova Dragoon
post 26 Jul, 2005 - 07:34 AM
Post #2


The Innocent Shall Suffer, Big Time

Group Icon
Joined: 16 Aug, 2001
Posts: 6,128



Thanked 4 times

Dream Kudos: 515

Expert In: Python, Linux

My Contributions


could you post the code you are having trouble with, or a link to the site?

IIRC, if you remove the background color attribute they become transparent over the background.
User is offlineProfile CardPM

Go to the top of the page

Amadeus
post 26 Jul, 2005 - 08:58 AM
Post #3


g++ -o drink whiskey.cpp

Group Icon
Joined: 12 Jul, 2002
Posts: 12,173



Thanked 33 times

Dream Kudos: 25
My Contributions


Try this
CODE

<TABLE ID="tableID" STYLE="background-color: transparent;">

It should work, with these noted limitations.
User is online!Profile CardPM

Go to the top of the page

Sirizz
post 26 Jul, 2005 - 09:11 AM
Post #4


New D.I.C Head

*
Joined: 26 Jul, 2005
Posts: 4

Site

This is the link to the page where I use the tables with opaque background. As u can see, I managed to get a opaque textbox (upper box), and table. The text in it is white, but it is transparent too. Now I only have to get the text normal.
User is offlineProfile CardPM

Go to the top of the page

Jhin
post 26 Jul, 2005 - 10:03 AM
Post #5


D.I.C Head

Group Icon
Joined: 6 Jul, 2005
Posts: 215



Dream Kudos: 120
My Contributions


Once I removed this:

CODE

.opaque {
opacity: 1;
filter: alpha(opacity=10);
}


And added this:

CODE

textarea{
    color: white;
    background-color: transparent;
}

td{
    color: white;
    background-color: transparent;

}


The text area became transparent with the font color white in both IE6 and FF 1.0.6, WinXP.
User is offlineProfile CardPM

Go to the top of the page

Sirizz
post 26 Jul, 2005 - 11:11 AM
Post #6


New D.I.C Head

*
Joined: 26 Jul, 2005
Posts: 4

This is not really what I'm looking for. It has to be like it is now on the page, so I can see through the box, but not fully. I only have to get the text brighter.

Has someone a solution for that??
User is offlineProfile CardPM

Go to the top of the page

skyhawk133
post 26 Jul, 2005 - 11:15 AM
Post #7


Head DIC Head

Group Icon
Joined: 17 Mar, 2001
Posts: 14,844



Thanked 45 times

Dream Kudos: 1650

Expert In: Web Development

My Contributions


One of our code snippets has the CSS for a transparent box with non-transparent text, here is the CSS:

CODE
div.box {
    /*Any properties you'd want the box to have.*/
    /*Would probably be position, dimension type stuff.*/
    border: 1px solid #000000;
    width: 500px;
    height: 500px;
    position: relative;
}
div.box_contents {
    background-color:transparent;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 101;
}
div.box_background {
    background-color: blue;
    height: 100%;
    opacity: 0.5;
    filter:alpha(opacity=50); /* IE's opacity*/
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    z-index: 100;
}


Here is the full snippet: http://code.dreamincode.net/snippet188.htm
User is offlineProfile CardPM

Go to the top of the page

Jhin
post 26 Jul, 2005 - 11:19 AM
Post #8


D.I.C Head

Group Icon
Joined: 6 Jul, 2005
Posts: 215



Dream Kudos: 120
My Contributions


ahh ok my appologies, I didn't quite understand what you were looking for smile.gif
User is offlineProfile CardPM

Go to the top of the page

Sirizz
post 26 Jul, 2005 - 12:39 PM
Post #9


New D.I.C Head

*
Joined: 26 Jul, 2005
Posts: 4

Thx Shyhawk, you helped me out! I managed to get my text in a transparent box!

Thx all for ur help!

Grtz
User is offlineProfile CardPM

Go to the top of the page

skyhawk133
post 26 Jul, 2005 - 12:46 PM
Post #10


Head DIC Head

Group Icon
Joined: 17 Mar, 2001
Posts: 14,844



Thanked 45 times

Dream Kudos: 1650

Expert In: Web Development

My Contributions


No problem, the credit has to go to hotsnoj for actually writing that code though!!

Glad we were able to help Sirizz, tell your friends smile.gif Hope we can be of assistance in the future as well.
User is offlineProfile CardPM

Go to the top of the page

snoj
post 27 Jul, 2005 - 09:31 PM
Post #11


$Null

Group Icon
Joined: 31 Mar, 2003
Posts: 3,304



Thanked 5 times

Dream Kudos: 700
My Contributions


Cool, I'm glad someone else else besides me has found it helpful! biggrin.gif
User is offlineProfile CardPM

Go to the top of the page

rhand
post 10 May, 2008 - 09:44 PM
Post #12


New D.I.C Head

*
Joined: 10 May, 2008
Posts: 1

Well I am trying to add the same on a site of mine. With not success so far. I made a content area and images are floating behind it using javascript. Could someone maybe have a look and tell me what I did wrong. I have been at it for some time now. Fonts are still transparent. I only want the background to be transparent. Maybe I am too tired.... ;-) Here is the css code that is the problem (iI did not paste the entire stylesheet):
CODE


body
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#fff;
background-image:url(images/topbck.gif);
background-repeat:repeat-x;
color:#666;
margin:0;
padding:0;
overflow:hidden;

}

div#huls {
    margin:auto;
    width:60%;
}
div#container{
    position:absolute;
    width:800px;
    height:100%;
    margin:auto;
    z-index:1002;
    background-color: white;
    opacity: 0.8;
    filter:alpha(opacity=50); !important
    
}

div#background {
    float:left
    width:750px;
    height:100%;
    z-index:1002;
    background-color: white;
    }
    
div#lipsum{
    font-family:Arial, Helvetica, sans-serif;
    float:left;
    padding:10px;
    margin:auto;
    width:100%;
    height:100%;
    color:#0066FF;
    z-index:1003;
    }
    
#header{
    width:800px;
    height:30px;
    z-index:1002;
    height:69px;
    float:left;
    margin:0;
    color:#0066FF;
}


User is offlineProfile CardPM

Go to the top of the page

2 Pages V  1 2 >
Fast ReplyReply to this topicStart new topic
Time is now: 11/22/08 11:22AM

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

Bye Bye Ads

Free DIC T-Shirt

T-Shirt Example

Related Sites

Monthly Drawing

Thumb Drive

Partners

Top Contributors

Top 10 Kudos This Month