CSS opacity and text problem

Question

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

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 the xHTML.

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

Answer 1

Short answer: No.

Long answer: Yes, if you use rgba colors instead of the opacity property. For example, the following would 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 a PNG with alpha channels.