CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
HurpaDerpa
HurpaDerpa

Reputation: 140

Opacity Background while Text is not Transparent

I have divided my text and background into 2 divs: one for the transparent background, while the other is for the actual content.

Subsequently, search was done in which resulted to try .innerDiv { position: relative} ; it still did not work.

HTML:

<div id="container">    
    <div id="content">
        <h1> Hello </h1>
    </div>
</div>

CSS:

#container 
{
    margin: auto;
    background-color: white;
    opacity: 0.3;
    height: 90%;
    width: 80%;
    font-size: 30px;
}

#content {
    position: absolute;
    font-size: 20px;
}

P.S: Inserting opacity 0.9; into #content did change the transparency however 1 is still not 100% permanent.

Upvotes: 0

Views: 2376

Answers (3)

Christoph
Christoph

Reputation: 51201

opacity is inherited, so if you change a parent to an opacity lower than 1, all child elements will have the same opacity. You can further decrease the opacity of your child elements, however the "total" opacity value can never be higher than that of its parent.

E.g. if you declared opacity:0.75 for your parent, each child as well is only 75% opaque, but could as well have down to 0% if you decide to further decrease its opacity. After one thinks about it for a while this sounds kind of logical, right?

You can solve your problem in several other ways:

For colors, use the according color notations: rgba or hsla. The alpha channel a describes the opacity:

#container{
    background-color: rgba(255,255,255,.3); /*30% opaque white*/
}

For images, use translucent images in the first place, or the transparent filter filter: opacity(30%);.

For background image, use an accordingly placed pseudo-element for the parent and use regular opacity.

Upvotes: 4

soroush
soroush

Reputation: 31

this way that you declared will not work because the child which is the inner div , will inherit the opacity . this is one of the ways you could do it:

 <div class="mainDiv">
    <div class="transparentDiv">
    </div>
    <div class="textDiv">
      <h1>My text</h1>
    </div>
</div>

and the css would be :

.transparentDiv {
    height: 30px;
    background-color: #00B7FF;
    opacity: 0.3;
}
.textDiv {
    top: 10px;
    position: absolute;
}

and you can change height and top property to set it to your desired position.

Upvotes: 0

Samir Selia
Samir Selia

Reputation: 7065

Instead of opacity, you can use rgba where

r = red

g = green

b = blue

a = opacity

Here is the Demo

Upvotes: 0

Related Questions