how can I set the opacity of the background of a span, but not the text?
<p>I've got some code which I've needed to customise</p>

<p>my html</p>

<pre><code>&lt;div class="text-rotator add-top-half add-bottom-half align-left white-txt medium-txt uppercase highlight-bg"&gt;
    &lt;div class="rotator-wrap" style="display: block;"&gt;
        &lt;span class="rotate"&gt;Creating designs!&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>my css is:</p>

<pre><code>.text-rotator {
    line-height: 80px!important;
    display: inline!important;
}

.text-rotator span {
    background: #3399ff!important;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
}
</code></pre>

<p>But at the moment it is setting the opacity of the text as well as the background and I cannot work out how to leave the text and just change the background.</p>

<p>Any ideas?</p>