Text inside opaque container getting fade

Question

I have a container for which I have set the opacity to 0.6 in css. I have another div inside the above container where I have some text with color:white say "MY TEXT". Now the problem is this text is getting fade as I want only the outer container to fade with opacity not the text. Can someone please help.

Below is the html code :

<div id='cover-part' style='text-align:center1;padding:15px'>
<div id='opaque-cover-part'>
<div id='cover-part-text'><span>THIS TEXT SHOULD NOT FADE</span></div>
</div>

Below is the CSS

#cover-part{
    position: relative;
    background: url(posts/images/1.jpg) no-repeat 0 center, linear-    gradient(white, black);
    height:250px;
    }


 #cover-part-text{
    position:relative; 
    font-size: 30px;
    color:#FFFFFF;
    left: 0px;
    bottom:0px;
    font-weight:bold;
    display:block;
    z-index:2;
    font-family: helvetica, arial, sans-serif;

    height:100px;
    width:100%;

    padding-left:15px;
    padding-top:15px; 
    }

 #opaque-cover-part{
     position: absolute;
    left: 0px;
    bottom:0px;
    height:100px;
    width:100%;
    background:linear-gradient(black, black);
    opacity:0.6;
    filter:alpha(opacity=50); 
     z-index:1; 
     }

Related - http://stackoverflow.com/questions/806000/how-to-give-text-or-an-image-a-transparent-background-using-css?rq=1 — Paulie_D, Feb 22 '16 at 20:36
You can move the #cover-part-text out from the #opaque-cover-part, and make it positioned absolute, over the #opaque-cover-part in the same place. — KostaShah, Feb 22 '16 at 22:40

score 0 · Answer 1 · answered Feb 22 '16 at 20:36

0

It's very simple you can just add a class or id in your span where the elements that have this class aren't opaqued.

working-example:

https://plnkr.co/edit/5jbyZv609LEaKBctKFC1?p=preview

eg:

.not-opaque{
      opacity:1;
    }

and

<span class='not-opaque'>THIS TEXT SHOULD NOT FADE</span>

answered Feb 22 '16 at 20:36

JmRag

1,443
7
19
56

this not working mate. – user3478137 Feb 22 '16 at 20:40

score 0 · Answer 2 · answered Feb 22 '16 at 20:37

0

Just add opacity: 1; to your inside container;

https://plnkr.co/edit/6o33hFTwmBoAv16alfca

answered Feb 22 '16 at 20:37

Hotwer

150
9

try to make the backgound of the page black, to see if more clearly – Hotwer Feb 22 '16 at 20:50
my background is an image, I don't want it black – user3478137 Feb 22 '16 at 20:53
just do it for test purposes. The container more whiter makes the text more invisible. – Hotwer Feb 22 '16 at 20:56
tried. still no luck – user3478137 Feb 22 '16 at 21:00

Text inside opaque container getting fade

2 Answers2