CSS - Opacity On Background But Not Text?

Using transparent gif text. It is linked

On mouse over, there is a white background with an opacity of 50%, can I do this with only CSS or will I need to use javascript?


How do I do this? I've figured out the opaque text on 50% opaque white background.

I am trying to learn CSS and am currently trying to mirror a website to practice. I would post the website I am mirroring but due to the forum rules, I cannot.

I am trying to replicate the black background with opacity for the a:link and the white background with opacity for the a: hover. My browser is IE and I have tried the filter:alpha(opacity=1-100) but to no avail.

Here is the HTML I am using for this particular container:

<div id="fivels">

<div id="classone">
<a class="home" href="#">Home</a>
<a class="gallery" href="#">Gallery</a>
<a class="about" href="#">About</a>
<a class="help" href="#">Help</a>
<a class="partner" href="#">Partner</a>

</div>

</div>

And here is my CSS:

#fivels {
margin-left: auto;
margin-right: auto;
height: 150px;
width: 800px;
background-image: /* the forum will not let me post URLs, gut a jpg of grass goes here */
}



#classone {
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: center;
}

#classone a:link {
color: white;
text-decoration: none;
background-color: black;
filter: alpha(opacity=20);
}

#classone a:visited {
color: white;
text-decoration: none;
background color: black;
filter: alpha(opacity=20);
}

#classone a:hover {
color: white;
text-decoration: none;
background-color: white;
filter: alpha(opacity=20);
}

.home {
padding: 3.2em;
}
.gallery {
padding: 3.2em;
}
.about {
padding: 3.2em;
}
.help {
padding: 3.2em;
}
.partner {
padding: 3.2em;
}

Also, on a side note, is using the padding attribute the most efficient way of seperating the links?

any recommendations on a way to make my h2 text change opacity when the containing div is hovered?

Better explanation:

I have an accordion style page with click-able divs that contain the title of that div in a h2 tag. The div is much larger than the text in the h2 tag.
I am able to make the text itself change opacity when it its hovered but I would like the text to change when the div is hovered.

I do not want to make the div itself change opacity because it overlaps the div behind it.

(I understand that I need have to add some filters and such, I am not worried about that at this point)

html code:
Code:

<div class="previous_tab">
          <a href="movement.html" class="clickable_tab">
              <h2>The Movement</h2>
          </a>
</div>

css code:
Code:

.previous_tab
      {
	width:100px;
	height:500px;
	margin-left:-5px;
	background-color: #CCCCCC;
     {

.clickable_tab
     {
	display:block;
	width:100px;
	height:500px;
	text-decoration: none;	
     }

h2
     {
	opacity:.6;
	font-size: 1em;
	color: #333333;   
     }

h2:hover
     {
	opacity:1;
     }

I have a <ul> list in which I set the opacity for the <li> elements. Inside the <li> elements I have <a> elements. The issue is that the <a> element text is inheriting the opacity for the <li>???

Here is a link

http://casadelmar.tmhdesign.com

Thanks.

Ok, I am creating an image gallery that is composed of a square layer that has opacity of 50. I have created 9 other div layers within that layer to hold thumbnails. When I put images in those thumbnail divs, the image shows up as semi-transparent. I do not want this. Here is my code, how can I turn off opacity just in those div thumbnail squares?


CSS
Code:

    
    DIV.outer
      {
      position:absolute;
      left: 50%;
      top: 50%;
      width: 500px;
      height: 488px;
	  border:2px solid white;
      margin-left: -250px; /* half of width */
      margin-top: -244px;  /* half of height */
      }
    DIV.inner
      {
      position:absolute;
      left: 50%;
      top :50%;
   	  width: 500px;
      height: 488px;
      margin-left: -250px; /* half of width */
      margin-top: -244px;  /* half of height */
      background-color:#CC6666;
	  filter:alpha(opacity=50);
	  -moz-opacity:.50;
	  opacity:.50;		
      }

	div.tn
	{
	position:absolute;
	width:115px; 
	height:115px;
	background-color: #660000; 
	layer-background-color: #660000; 
	border: 1px none #000000;

	}

HTML
Code:

<div class="outer">        
     <p>&nbsp;</p>
   <div class="inner">  
 <!--row 1!-->
     <div class="tn" style="z-index:2; left: 50px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
     <div class="tn" style="z-index:2; left: 192.5px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
     <div class="tn" style="z-index:3; left: 335px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
 <!--row 2!-->	 
	 <div class="tn" style="z-index:2; left: 50px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
     <div class="tn" style="z-index:2; left: 192.5px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
     <div class="tn" style="z-index:3; left: 335px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
 <!--row 3!-->
	 <div class="tn" style="z-index:2; left: 50px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
     <div class="tn" style="z-index:2; left: 192.5px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
     <div class="tn" style="z-index:3; left: 335px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
  </div>  
</div>

What i'm trying to get at here is how do I get non transparent items in a transparent div box?

Hello Friends,

I want to place an image bellow my (h1 heading). The image is a 50px-800px box with curved edges both the side. Basically we

place an image bellow any text with "background: url('image-location') repeat-x;" css code. But as i told the image have curved

edges at both sides. Hence, I have cut the image in 3 pieces namely h1.gif, h2.gif & h3.gif respectively. Now i am confused

how can i place it. Please help me!



This is the tag i am using

<div id="title">
<h1>This is the title</h1>
</div>

And This is the CSS code bellow,

#title {

height: 50px;
background: url('../img/h1.jpg') no-repeat;
background-attachment: fixed;
}

http://www.refinethetaste.com/html/

I added a new tabbed links with a drop line menu. The problem here is, my links in the tabbed area varies and background comes short sometime. You can see it at the link, red main menu area... Can I make background extend with the text?

Code:

<style type="text/css">
.pro_linedrop {
height:26px;
width:776px;
background:url(http://www.refinethetaste.com/html/THEMES/default/images/bg_mainmenu_off.gif);
position:relative; 
z-index:500;
}

.pro_linedrop .select {
margin:0; 
padding:0; 
list-style:none; 
white-space:nowrap;
}

.pro_linedrop li {
float:left;
background:url(http://www.refinethetaste.com/html/THEMES/default/images/bg_mainmenu_on.gif);
}

.pro_linedrop .select a {
display:block; 
float:left; 
background: url(http://www.refinethetaste.com/html/THEMES/default/images/bg_mainmenu_off.gif); 
padding:0 0 0 15px; 
text-decoration:none; 
line-height:26px; 
white-space:nowrap; 
}

.pro_linedrop .select li.line a {color:#FFFFFF;}

.pro_linedrop .select a b {
display:block; 
padding:0 30px 0px 15px; 
background:url(http://www.refinethetaste.com/html/THEMES/default/images/bg_mainmenu_off.gif) right top;
}

.pro_linedrop .select a:hover, 
.pro_linedrop .select li:hover a {
background: url(http://www.refinethetaste.com/html/THEMES/default/images/bg_mainmenu_on.gif); 
padding:0 0 0 15px;
line-height:26px;
}

.pro_linedrop .select a:hover b, 
.pro_linedrop .select li:hover a b {
display:block; 
padding:0 30px 9px 15px; 
background:url(http://www.refinethetaste.com/html/THEMES/default/images/bg_mainmenu_on.gif) right top; 
}

.pro_linedrop .sub {
display:none;
}
.pro_linedrop ul ul {display:none;}



.pro_linedrop .sub {
margin:0; 
padding:0;
list-style:none;
}

.pro_linedrop .sub li {background:transparent;}

.pro_linedrop .select :hover .sub {
height:20px;
display:block; 
position:absolute;
float:left;
width:774px;
top:26px; 
left:0; 
text-align:center;
background:#9f0b0b;
}

.pro_linedrop .select :hover .rt li {float:right;}

.pro_linedrop .select :hover .sub li a {
display:block; 
height:25px; 
line-height:20px; 
float:left; 
padding:0 10px; 
margin:0; 
color:#FFFFFF;
font-size:10px;
}

.pro_linedrop .select :hover .sub li.subline a {color:#9f0b0b;}

.pro_linedrop .select :hover .sub li a:hover,
.pro_linedrop .select :hover .sub li:hover
{color:#000; line-height:20px; position:relative;}

.pro_linedrop .select :hover .sub li:hover > a {color:#5f5548;}

.pro_linedrop .select :hover .sub :hover ul {
padding:0; 
margin:0; 
list-style:none; 
display:block; 
width:112px; 
position:absolute; 
left:-1px; 
top:25px; 
border:1px solid #ece7d1; 
border-top:0; 
background:#fff;}

.pro_linedrop .select :hover .sub :hover ul li a {width:80px; text-align:left; height:20px; line-height:18px;}
.pro_linedrop .select :hover .sub :hover ul li a:hover {line-height:16px;}

</style>

<div class="pro_linedrop">
<ul class="select">

<li class='line'><a href='#'>Administration Panel</a><ul class='sub'>
<li><a href='#'>Images</a></li>
</ul></li><li class='line'><a href='#'>Gift Baskets</a><ul class='sub'>
<li><a href='#'>Charcuteries Pochette</a></li>
<li><a href='#'>Cheese & Chocolate</a></li>
<li><a href='#'>Chocolate & Cookies</a></li>
<li><a href='#'>Classic Fancy Delight</a></li>
<li><a href='#'>Fresh Fruits</a></li>
<li><a href='#'>Pasta Lover's</a></li>
<li><a href='#'>Romantic Flower</a></li>
<li><a href='#'>Splendor Fine Food</a></li>
<li><a href='#'>Supplier Documents</a></li>
<li><a href='#'>Sweet Delight</a></li>
<li><a href='#'>Tea Lover's</a></li>
<li><a href='#'>Teddy Bear Basket </a></li>
<li><a href='#'>The Wish Chest</a></li>
<li><a href='#'>Visitor's Gratitude</a></li>
</ul></li> 

</ul>
</div>

I took over a website from a graphic designer. Needless to say, everything including all the text was a graphic.

Now having said that I have an about page that is just that. I have taken that graphic and yes I know I should probably break it up but.

So what I have done is take all or almost all of the text off of the graphic, the problem is, the customer can't change the text on their about page because of it being a graphic.

Now I can set the graphic as a background image or a single image on a page. And what I need to do is float text over the image.

Here is the image

And here is the new image

So how would I do the same with the text only using real text? Right now I have the image in a table and the text right justified. I'm sure there is a better way.

I'm having trouble positioning this opaque text. I woud like to use it as a centered background on every cell of my table.

http://section31.us/temp/absolute.htm

Can anyone help me out. To get this to work the way I want, do I have to use the z-index property as well?

I am making this table area and I want the table to have a image as a background to give it more of a nice detail to it but I can't figure out how to get it to work for the table.

Thank you.

I am trying to make a rectangle with an image on the left and a horizontal list of anchor links on the right. Each anchor link should be a 32x32 px image with text underneath each image.

My problem is that the anchor links are not tall enough and the text is on top of the image instead underneath it.

Please help.

Code:

<style type="text/css">
.toolbar_list ul { float: right; text-align: right; margin:10px;}
.toolbar_list li{list-style: none;display: inline;}
.toolbar_list a { float: none; width: 32px; height: 32px; }

div.toolbarheader {line-height: 48px;padding-left: 55px;background-repeat: no-repeat; border-style:solid;}

.icon-32-delete    { background-image: url(stdimages/icon-32/delete.png); }
.icon-32-save    { background-image: url(stdimages/icon-32/save.png); }
.icon-32-new    { background-image: url(stdimages/icon-32/new.png); }
.icon-48-module    { background-image: url(stdimages/icon-48/module.png); }
</style>

</head><body>

<div class="toolbar_list">
 <ul>
  <li><a href="#" class="icon-32-delete delete" title="Delete">Delete</a></li>
  <li><a href="#" class="icon-32-save save" title="Save">Save</a></li>
  <li><a href="#" class="icon-32-new new" title="New">New</a></li>
 </ul>
 <div class="toolbarheader icon-48-module">Title</div>
</div>

I am very, very new at web design, and would like to make a colored background behind text, although I am sure that is not the right name for it!

For example, in this this website I would like to emulate how to make that curved rectangular background behind the Online Poll, but I have no clue what the name or the source code behind it that makes it so!

If anyone could even just give me the proper name for it so I can google it, I would be very thankful!

Hi All,
I am experementing with a fixed watermark image/background on my webpage.The code worked fine to prevent the image from tiling however when I scroll the whole lot goes as well,the table of rolovers and the header image. I need a code to keep the table of javascript and the image fixed while only the text scrolls.

Also as you will see the bg image takes up the whole page which results in the text scrolling over the entire height of the page.Is there any code I can apply to make a cut off point for the text,for appearance sake lets say the top bar of the image .Here is the url of the page I am working on.

Thanks

URL

I can make my menu using ul/li elements with either a background image with text in the li or I can just create an image with text in it and having alt text.

Is there a difference in regards to search engines and is there any other reason that I would want to have actual text with a background img on the li?

The reason that I would want to use images with the text built into them is that the text will no be resized and I can use a specific font.

Hi All,
It has been 20 years since I last wrote a program and CSS wasn't even thought of then so I need a little help.

I wish to place a text area/box with a background I can put text on top of in my html. Any image should work. I wish the text area/box to start 15% from the left edge and cover 70% of the screen width and be as high as the image. I would like the image to automatically re-size to take care of different screen resolutions. I would like to have no scroll bars on the text area/box and I would like the text to be fixed so it cannot be changed by someone typing in the text area/box. However for future reference I would like to know how to turn the scroll bars on so the text scrolls but the image stays fixed.

I have included the html I thought would work but doesn't.

Any help would be greatly appreciated,

Thanks,
**** Roose

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<meta http-equiv="Content-Type"" content="text/html; charset=UTF-8">
<meta name="revisit-after" content="7 days">
<meta content="MSHTML 6.00.5730.13" name="GENERATOR" >
<title>TestBox</title>
<style tyle=text/css>
txta {
width: 735px;
background-image: url(new.jpg);
border: 1px solid #781351;
height: 80px;
padding: 1px;
position: absolute;
left:15%;
}
</style>
</head>
<body>
<div id="txta">
<textarea name="t1" width "735px" height: "85px">
</div>
</body>
</html>