0

I have applied background-image to div with class="hero-contact-us" and opacity=0.3. I am not able to figure out why opacity property is applied to the child element with class="hero-contact-us-text". I will really appreciate your help.

<div class="hero-contact-us">
    <div class="hero-contact-us-text">Some text here</div>
</div>

Here is the CSS

.hero-contact-us
{
    background-image: url('media/pexels-ruslan-burlaka-140945.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.3;
    position: relative;
}

.hero-contact-us-text
{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    color:#173348;
    font-size: 1.5em;
    z-index: 99;
    opacity: 1;
}
Varinderjit Kaur
  • 41
  • 6

2 Answers2

0

It is because .hero-contact-u-text is inside the .hero-contact-us. whatever your css styles of the parent, it will affect its children elements. What you can do is to remove the background styles in your parent and create another div inside .hero-contact-us solely for the purpose of the background image. You can set the background-image and opacity of that div and you can stretch it out using position: absolute; top: 0; left: 0; width: 100%; height: 100%

rjcarl
  • 702
  • 6
  • 11
0

All CSS defined in the parent element will apply to everything within it. It means that you cannot make a child element less transparent than the parent, without some trickery. How to make some trickery? Please have a look at this link.

how to cancel opacity for a child element?

Senior0023
  • 142
  • 1
  • 9