How Do I Create a partially-transpartent Button?

Interpolerater · 02-06-2007, 02:57 PM

I'm making a slideshow with where the buttons to go to the next image are opaque and floating over the slide. I wanted to make the images rounded, but the only way I could think of doing so was by creating a partially-transparent GIF image. It seems as if it works as a normal <IMG> type, but when I make the button's background-Image: URL into the gif, it's not transparent. Here's the code:

Code:

.transButton {
position: relative;
background-Image: URL(http://www.geocities.com/interpolerater/Button1.gif);
font-family: arial;
-moz-opacity:0.25; filter:Alpha(Opacity=25);
font-size: small;
width: 100;
height: 32;
color: ffffff;
text-align: center;
border: none;
top:50;
}

<Body> Section

Code:

<input Class="transButton" type='Button' value='Last >>' id='-100' onclick='change(this.id)'><p>
<img src='http://i80.photobucket.com/albums/j164/interpolerater/' value='0' id='slide' onload='if (this.height>550){this.height=550}'>

How would I make the image rounded when it's floating over an image?

ronaldb66 · 02-06-2007, 03:14 PM

There is no such thing as a partially transparent gif; the gif format only supports single bit transparency (either full or nothing). For partial transparency you'll need the png format with a full 8 bit alpha channel--which IE6.0 doesn't natively support (and I believe IE7.0 still doesn't...

).
Here is a partial workaround for that issue: Transparent PNG Support. Also a worthwhile read: Cross-Browser Variable Opacity with PNG: A Real Solution (more about image formats).

Interpolerater · 02-06-2007, 03:59 PM

Sorry, I didn't really specify what I meant. The 'Partially Transparent' GIF is a gif with a one of the colours chosen to be transparent, like this:

I make the image transparent with Photoshop and then upload it; I do not make it transparent with CSS. What I am wonding is why it's only see-through when I display it as an <IMG>, but won't when I make the background-Image of a button the same image.

This Works:
<img src="http://www.geocities.com/interpolerater/Button1.gif">

This Doesn't
<input style="background-Image: URL(http://www.geocities.com/interpolerater/Button1.gif);">

Interpolerater · 02-06-2007, 04:05 PM

Ah... I just saw the button on the forum and realized it was a transparent GIF, so I viewed it. It's not a button, it's an image, but I don't care! I totally forgot I could do that... Thanks for the reply anyways.