how can I set the opacity of the background of a span, but not the text?

Question

I've got some code which I've needed to customise

my html

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

my css is:

.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;
}

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.

Any ideas?

There is a few questions already on StackOverflow, a quick search on google or even here and you would find out them. — dippas, Jun 27 '16 at 12:50

score 4 · Accepted Answer · answered Jun 27 '16 at 12:41

4

Use the following CSS:

.text-rotator span {
 background-color:rgba(255,0,0,0.3);/*background color and opacity together*/
 }

answered Jun 27 '16 at 12:41

Sanjeev Kumar

3,113
5
36
77

score 2 · Answer 2 · answered Jun 27 '16 at 12:41

2

Use RGBA color value for background:

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

.text-rotator span {
    background: rgba(51, 153, 255, 0.6) !important;
}

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

answered Jun 27 '16 at 12:41

Mohammad Usman

37,952
20
92
95

Thats perfect thank you!! I'll accept your answer as soon as the site lets me :) – Totally Tech IT Jun 27 '16 at 12:43
@TotallyTechIT you are welcome) – Mohammad Usman Jun 27 '16 at 12:44

score 0 · Answer 3 · answered Jun 27 '16 at 12:47

Common problem. The opacity is applied to all child elements. A workaround is to use rgb color codes. Not all browser support rgba so you should define fallbacks as well.

/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";

score 0 · Answer 4 · answered Jun 27 '16 at 12:49

0

Use the following,

.text-rotator span.rotate {background:rgba(0,0,0,0.5);}

answered Jun 27 '16 at 12:49

Samir Ghodiya

38
7

how can I set the opacity of the background of a span, but not the text?

4 Answers4