How do I make a shaded, opaque background in CSS only?

Question

For some reason, I cannot figure out how to style this appropriately.

example

Or do I need to use the image on this?

Here is what I have currently:

#hero #hero-text {
    position: absolute;
    bottom: 0px;
    margin-left: 20%;
    margin-right: 20%;
    width: 60%;
    background-color: black;
    opacity: .3;

}

#hero #hero-text p {
    color: white;
    opacity: 1.0;
}

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 09 '14 at 15:48

score 3 · Accepted Answer · answered Aug 09 '14 at 15:50

3

Simply use

background-color: rgba(0,0,0,0.5);

answered Aug 09 '14 at 15:50

Etheryte

24,589
11
71
116

and remove the opacity ;) – Drea58 Aug 09 '14 at 15:50

How do I make a shaded, opaque background in CSS only?

1 Answers1