Css opacity question

and can it work in FF as well?

Page 1 of 1

4 Replies - 3696 Views - Last Post: 09 August 2005 - 12:08 PM

#1 nightshadedude  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 57
  • Joined: 30-November 03

Css opacity question

Posted 09 August 2005 - 07:27 AM

What I want to be able to do is to have 3 images (top, fill, bottom). With these 3 images i was going to place the first, then use the second to fill a text area depending on the amount of text, then the third to close it up. This is fine and I have had no problems with it. Where I run into problems is when I try to create an opacity filter over it, it fades the text as well as the background images. Is there any way to make it where you are able to fill the text area with the fill image and have only the background have the opacity.

Heres the code that i'm having the problem with.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Temp </title>

<style>
body{ background-color:black; }

#toppart{ width:137px;
 margin-top:1px;
 margin-left:1px;
 background-color:black;
 background-image:url('images/topimg.png');
 filter:alpha(opacity=100, finishopacity=5, style=1, startx=75, finishx=100);
 background-repeat: no-repeat; }

#fillpart{ width:137px;
 font-size:.60em;
 padding-left:2px;
 margin-top:-9px;
 margin-left:1px;
 padding-right:0px;
 background-color:black;
 color:white;
background-image:url('images/fillimg.png');
 filter:alpha(opacity=100, finishopacity=5, style=1, startx=75, finishx=100);
 background-repeat: repeat-y; }

#bottompart{ width:137px;
 margin-left:1px;
 background-color:black;
 background-image:url('images/bottomimg.png');
 filter:alpha(opacity=100, finishopacity=5, style=1, startx=75, finishx=100);
 background-repeat: no-repeat; }
</style>

</head>

<body>
  <div id = "toppart">&nbsp</div>
  <div id = "fillpart">
   Some Text! Some Text! Some Text! Some Text! Some Text! Some Text!
  </div>
  <div id = "bottompart">&nbsp</div>

</body>
</html>


RARed up the 3 images so you can see what I am looking at(imgs.rar)

Edit: Is there also any way to make this work correctly in FF cause I know the filter:alpha() doesn't work correctly.

Attached File(s)

  • Attached File  imgs.rar (882bytes)
    Number of downloads: 14

This post has been edited by nightshadedude: 09 August 2005 - 07:29 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Css opacity question

#2 Jhin  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 8
  • View blog
  • Posts: 257
  • Joined: 06-July 05

Re: Css opacity question

Posted 09 August 2005 - 08:31 AM

Well I found a site you can check out and use the tips found there for opaque text over semi transparent images.

Text Tricks:Opacity on Background with Fully Opaque Text

I haven't had a chance to try it out yet I'm at work. Please post if it does :)
Was This Post Helpful? 0
  • +
  • -

#3 nightshadedude  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 57
  • Joined: 30-November 03

Re: Css opacity question

Posted 09 August 2005 - 09:38 AM

I checked it out. What they are doing is positioning the text over a static image. What I would like to do is have an image repeat depending on how much text there is. So that approach wont work unfortunately.

Edit: I might be able to do this with tables, but I really would prefer not to use any on my page, so if there is a pure CSS way, that is what I would like to know

This post has been edited by nightshadedude: 09 August 2005 - 09:42 AM

Was This Post Helpful? 0
  • +
  • -

#4 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1813
  • View blog
  • Posts: 20,232
  • Joined: 17-March 01

Re: Css opacity question

Posted 09 August 2005 - 09:55 AM

Hotsnoj created this CSS that accomplishes this I believe:

http://code.dreaminc.../snippet188.htm

And a similar discussion recently:

http://forums.dreami...wtopic11677.htm
Was This Post Helpful? 0
  • +
  • -

#5 nightshadedude  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 57
  • Joined: 30-November 03

Re: Css opacity question

Posted 09 August 2005 - 12:08 PM

skyhawk133, on Aug 9 2005, 10:55 AM, said:

Hotsnoj created this CSS that accomplishes this I believe:

http://code.dreaminc.../snippet188.htm

And a similar discussion recently:

http://forums.dreami...wtopic11677.htm

I looked at these before and they didn't help me with what I was doing. I think i'm just going to have to make the images fade as opposed to using opacity to do it. Oh well, thanks for your help though!
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1