Opacity to be applied only on the back color and not on the text

Question

I want to have a background color with opacity in some text, however I want the opacity to be only on the background color. In my example, the opacity applies to both, color and back. How can I keep the opacity only to the background color?

http://jsfiddle.net/YA7Sw/

        <div class="col left">
            <p class="last"><span class="back" >here goes some text</span></p>
        </div>


p.last {
    color: #000000;
    font-family: helvetica,arial,sans-serif;
    font-size: 10px;
    font-weight: normal;
    line-height: 17px;
    margin-bottom: 17px;
}

.back { padding:5px;background-color:#893409;opacity:0.3; }​

Answer 1

Don't set the opacity of your span, just set the alpha of the background color, using the rgba notation :

.back { padding:5px;background-color:rgba(137, 52, 9, 0.3); }​

Demonstration : http://jsfiddle.net/hRzMa/

Note that you may want to add it to the p, not the span.

Demonstration on the paragraph : http://jsfiddle.net/9gqYn/

Answer 2

It sounds like you want to use a transparent background. Try something like this:

p.last
{
    background: rgb(54, 25, 25); /* Fall-back for browsers that don't support rgba */
    background: rgba(54, 25, 25, .5);
}

http://jsfiddle.net/ashwyn/MDcq2/

Answer 3

Add background-color:rgba(137, 52, 9, 0.3); in p.last css.

See Demo: http://jsfiddle.net/akhurshid/YA7Sw/12/

Note: rgba take integer values from 0 - 255

Answer 4

this will solve your problem. just use rgba

<p class="last"><span class="back" >here goes some text</span></p>
</div>
<style>
p.last {
color: #000000;
font-family: helvetica,arial,sans-serif;
font-size: 10px;
font-weight: normal;
line-height: 17px;
margin-bottom: 17px;

 }

 .back { padding:5px;
background-color: rgba(180,38,22, 0.2); }​
 </style>