Text should not possess its parents Opacity

Question

I want the text on top of the image not to have the opacity its parent is having without changing the layout.

HTML

<div class="container">
    <div class="imageHolder">
        <img src="http://www.hairstylermall.com/wp-content/uploads/short-layered-hairstyles-2013-2-200x300-short-layered-hairstyles-2013-20140813122004-53eb90341bf7e-440x425.jpg">
        <div class="messageBox">
            <h4>Something</h4>
            <p>This is dummy</p>
        </div>
    </div>
</div>

CSS

.imageHolder {
    position:relative;
}
.messageBox {
    position:absolute;
    bottom:20px;
    width:70%;
    background-color:#999;
    padding:10px;
    left:20px;
    opacity:0.5;
}

Please check this fiddle.

And please pure HTML & CSS

possible duplicate of [Transparent background, but not the content (text & images) inside it, in CSS only?](http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on) — Paulie_D, Aug 22 '14 at 10:10

Dexkill · Accepted Answer · 2014-08-22T10:11:10.177

1

Just set the background to a rgba and the text to a normal color:

.messageBox{
   background-color: rgba(153, 153, 153, 0.5);
   color:#999;
 }

should work.

See also: HEX to RGBA Converter he will convert your Hexcode (#999) to a RGB(A) Colorcode.

edited Aug 22 '14 at 10:11

answered Aug 22 '14 at 10:04

Dexkill

284
1
2
20

score 1 · Answer 2 · answered Aug 22 '14 at 10:04

1

Yes, that's possible using RGBA,

.messageBox {
    position:absolute;
    bottom:20px;
    width:70%;
    background-color:rgba(153, 153, 153, 0.5);
    padding:10px;
    left:20px;
}

See also: http://css-tricks.com/rgba-browser-support/

answered Aug 22 '14 at 10:04

idmean

14,540
9
54
83

Text should not possess its parents Opacity

2 Answers2