CSS opacity and text issue

Question

Is there a way to stop the opacity affecting the text of my links when the mouse is over my link? I just want the opacity to affect only the image.

Here is the CSS.

.email {
    background: url(../images/email.gif) 0px 0px no-repeat;
    margin: 0px 0px 0px 0px;
    text-indent: 20px;
    display: inline-block;
}

.email:hover {
    opacity: 0.8;
}

Here is xHTML.

<a href="#" title="Email" class="email">Email</a>

Answer 1

Short answer: None.

Long answer: Yes, if you use colors rgbainstead of properties opacity. For example, the following will give you a black background with 20% opacity and black text with full opacity:

p {
    background: rgba(0, 0, 0, 0.2);
    color: #000000;
}

For background images, use PNG with alpha channels.

Answer 2

( , ). .email: hover.

Answer 3

Yes, get the text out of the context of a transparent container with absolute positioning. This will also work with background images!

<div id="TransContainer">
    <div id="TransBox" href="#">Some text that will be opaque!</div>
    <div id="NonTransText">Some text that I do not want opaque!</div>
</div>

<style>
#TransContainer
{
    position: relative;
    z-index: 100;
    display: block;
    width: 420px;
    height: 165px;
    background-color: blue;
}
#TransBox
{
    background-color: green;
    display: block;
    width: 100px;
    height: 100px;
    opacity:0.4;
    filter:alpha(opacity=40)
}
#NonTransText
{
    color: #000;
    position: absolute;
    top: 20px;
    left: 0;
}
</style>