Solid Text with Transparent Background

Snot · February 19, 2011

I've been having a lot of trouble trying to apply some code to my site that will let me have a transparent background while keeping the text over it solid. I've found a "really easy" way to do what I want but I'm having trouble applying it to my site.

The guide I'm trying to use.

http://www.devwebpro.com/creating-solid-text-transparent-background/

A demo that you can view the page source on.

http://images.ientrymail.com/codeflu/Transparent-Content-Holder.html

I was hoping someone could take a look at my code and help me get it working right. I'm really new to css so if your treat me like I don't know anything you wont be far off.

The site I'm working on is at www.wararmada.com/TDB and my code is below.


/* CSS Document */
/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background-image:url(assets/images/bgtile.png);
background-repeat: repeat-x;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/* END OF CSS RESET */
/* SPIDER BACKGROUND */

#box {
width:800px;
height:850px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
background-image:url(assets/images/spiderbg.png);
background-repeat:no-repeat;
}

/* CONTENT BOX MOJO */

#contentBox {
width:300px; 
height:20px;
padding-top:200px;
margin-left:30%;
margin-right:30%;
}

#contentBox ul {
margin:0px; 
padding:0px; 
position:relative; 
width:100%;
}

#contentBox ul li {
display:inline; 
float:left; 
background-color:#000;
color:#FFF;
}

.titleCell {
width:75px;
height:20px; 
position:relative; z-index:1000; 
margin:0px; padding:0px;  
cursor:pointer;
}

.titleCell strong {
font-size:14px;
position:absolute; z-index:1000;
width:73px;  height:18px; 
text-align:center; 
border:#000 solid; border-width:1px;
}


#contentBox ul ul {
position:absolute; left:0px;
display:none; 
z-index:100;
}

#contentBox ul ul li {
border:#000 solid; 
border-width:1px; 
width:500px;
padding:10px;
margin-top:50px;
margin-left:-100px;
color:#FFF;
background-color:#CCC;
opacity: 0.2;
}
#contentBox ul li:hover ul {
display:block; top:-1px; top:19px;
}

#contentBox ul li:hover .titleCell strong {
border-width:1px;
background-color:#000;
color:#666;
}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<meta name="author" content="">
<meta http-equiv="Reply-to" content="@.com">
<meta name="generator" content="PhpED 5.8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="creation-date" content="01/01/2009">
<meta name="revisit-after" content="15 days">
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<div id="box">
    <div id="contentBox"> 
        <ul>
          <li>
              <div class="titleCell">
                <strong>Home</strong>
              </div>
              <ul>
                <li>
<h1>Welcome!</h1>

<h2>Volunteer Now!</h2>
            
                </li>
            </ul>
          </li>
          <li>
              <div class="titleCell">
                <strong>Search</strong>
              </div>
              <ul>
                <li>
<h1>Search Form!</h1>

<h2>Volunteer Now!</h2>

         
                </li>
            </ul>
          </li>
          <li>
              <div class="titleCell">
                <strong>Submit</strong>
              </div>
              <ul>
                <li>
<h1>Submission Form!</h1>

<h2>Volunteer Now!</h2>

            
                </li>
            </ul>
          </li>
          <li>
              <div class="titleCell">
                <strong><del>Forum</del></strong>
              </div>
              <ul>
                <li>
<h1>Forums Comming Soon</h1>

                </li>
            </ul>
          </li>
        </ul>
    </div>
    </div>

</body>
</html>

</code>

</ul>
          </li>
          <li>
              <div class="titleCell">
                <strong><del>Forum</del></strong>
              </div>
              <ul>
                <li>
<h1>Forums Comming Soon</h1>

                </li>
            </ul>
          </li>
        </ul>
    </div>
    </div>

</body>
</html>

</html>

cssfreakie · February 19, 2011

Well your mark-up doesn't allow you to make the content solid.

If i am correct the parent element dictates the opacity of the inner elements and those inner elements can't get solid anymore. There are quite some topics (on this board) about this exact question.

The only way you can do this is either change your html markup, by creating an extra background div behind the text and apply only opacity to that. Or:

The easiest way is create a transparent image a very tiny one. and use that as a background image with repeat. (that's what i usually do)

#my-element{
background: transparent url(../images/mytransparent.png) repeat;
}

Nice creative idea btw to show content that way using the top menu .

-edit: As you can see that guide, which I just watched at, uses a separate <div> called dimmed. That one comes behind the content. But i would use the little image really, much easier ::)

-edit2: i changed the code i gave i forgot a semicolon and repeat

Snot · February 19, 2011

Thanks for the info. I haven't tried to use an image as the background yet. It's something I might have to look into. It might be easier to make an expanding image box than it will be to figure out how to add another div in with out reworking my whole site.

I just found some info on CSS3 it looks like it has some stuff that may be able to do what i want. I'm going to look over all of it alittle more when i wake up. I pulled an all nighter =)

http://www.css3.info/introduction-opacity-rgba/

http://www.zenelements.com/blog/css3-rgb-rgba-color-opacity/

cssfreakie · February 19, 2011

haha have a good "night"

I use the border radius myself and transparent gif's. Maybe a nice site to look is webdesignerswall.com. Loads of tips on the css3 and html5

Snot · February 19, 2011

Nice I got it!

RBGA replaces opacity on the parent element. It doesn't effect the child element like opacity does.

I just added

{ background-color: rgba(255,0,0,1); }

To the div that I wanted to have a transparent background and the text text in the div still shows up solid.

#contentBox ul ul li {

border:#000 solid;

border-width:1px;

border-radius:10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

width:500px;

padding:10px;

margin-top:50px;

margin-left:-100px;

color:#FFF;

background-color: rgba(255,0,0,0.2);

This has only been tested in firefox.

cssfreakie · February 20, 2011

nice one! pretty sure this won't work for older ie's but it's a good try!

Dont forget to place your code in code tags

Sign In

Solid Text with Transparent Background

Recommended Posts

Snot

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

Snot

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

Snot

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information