background opacity and caption opacity

Asked Jun 01 '16 at 11:55

Active Jun 01 '16 at 11:55

Viewed 29 times

This code is generated by a wordpress slider plugin when I enter a caption for an image.

<div class="bx-caption" style="color: rgb(0, 0, 0); font-size: 14px; font-family: 'Open Sans'; background-color: rgb(255, 255, 255);">
<span class="caption">This is a newspaper image</span>
</div>

If I put css like this:

div.bx-viewport .bx-caption {
    background:#5e7f6c !important;
    padding:1em;
    display:block;
    opacity:0.5;
}

div.bx-viewport .bx-caption .caption {
    color:#000;
    opacity:1.0;
}

it won't work :-) I want the text not be transparent, only the div.bx-viewport. Is this possible?

asked Jun 01 '16 at 11:55

bestprogrammerintheworld

5,417
7
43
72

1

its not possible.. child will take parent's opacity by default. – Richa Jun 01 '16 at 11:59
Look at this question that I have asked some days ago: http://stackoverflow.com/questions/37174228/container-with-less-opacity-than-childs – Francisco Romero Jun 01 '16 at 12:03
the class need to be together ".bx-caption.caption" – HudsonPH Jun 01 '16 at 12:06
just work with rgb and you can do this background: rgba(0, 0, 0, 0.4); color: rgba(0, 0, 0, 1); – HudsonPH Jun 01 '16 at 12:39
@HudsonPH - no that wont apply no css :-) ( bx-caption.caption ) – bestprogrammerintheworld Jun 01 '16 at 12:46
@bestprogrammerintheworld remove the opacity and convert everthing to rbg, is the only solution for this – HudsonPH Jun 01 '16 at 12:48
Thanks for getting me on the right track regarding to this. If I would be able to answer my own question I would have, but this question is marked as duplicated. Anyway - I have solved the issue. Thanks a lot!!! – bestprogrammerintheworld Jun 01 '16 at 12:58

background opacity and caption opacity

0 Answers0