Solid Text with Transparent Background

**Snot** · 02-19-2011, 09:49 AM

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-so...nt-background/

A demo that you can view the page source on.
http://images.ientrymail.com/codeflu...nt-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.

Code:

/* 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;
}

Code:

<!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>

**Snot** · 02-19-2011, 09:10 PM

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.

Thread: Solid Text with Transparent Background

Thread Tools

Search Thread

Solid Text with Transparent Background

Bookmarks

Bookmarks

Posting Permissions