CODEWITHSUNDEEP
htmlcsstextopacitynested
Alex B
Alex B

Reputation: 3

Opacity issues with text nested within divs

I have three divs, one big parent div, one smaller box inside the parent, and then text inside of the smaller box.

<div class='parentDiv'>
    <div class='smallBox'>
        <div class='text'> Hello!
        </div>
    </div>
</div>

For some reason, the opacity of my 'Hello!' text is being faded to something that looks like .5; or 50% I can't tell because I have nothing setting the opacity of any of these divs.

the Background-color of my ParentDiv and smallBox is set to : transparent; so you can see the text inside.. would the transparent background be affecting the opacity of the text? How can I fix this?

here is my css. 

.parentDiv {
 width: 1020px;
 height: 200px;
 background-color: Transparent;
 position: absolute;
 top: 450px;
}

.smallBox {
 width: 200px;
 height: 200px;
 position: absolute;
 left: 160px;
}

.text{
font-family: robotolight, sans-seriff;
font-size: 18px;
color: #ffffff;
text-align: center;
left: 30px;
position: absolute;
z-index: 100000;
width: 100px
margin: 0px auto;
line-height: 30px;

}

Upvotes: 0

Views: 53

Answers (1)

ratherblue
ratherblue

Reputation: 2108

Fonts with a 'light' font-weight will look more faded due to their nature. Try changing fonts and see if it is still an issue.

Upvotes: 1

Related Questions