-1

I am seeking help correcting the opacity on a class. Please pardon my not having shown the work for the many approaches I have tried.

Following is a demo on codepen: Codepen Demo

.intro .uk-overlay-primary {
    opacity: 0.5;
}
.intro .intro-title {
    opacity: 1;
}

The 'intro-title' class is inheriting the opacity of the 'ul-overlay' class. How can I resolve this, forcing the 'intro-title' opacity to be 1, atop of the overlay class?

The Dude man
  • 383
  • 6
  • 19
  • 2
    I believe this is similar to this post - https://stackoverflow.com/questions/10422949/css-background-opacity – Yor Sep 05 '19 at 02:41

2 Answers2

1

As I commented this is somehow similar to this post. For the solution, you can try this. I changed the structure if its okay to you and made the overlay position: absolute

.intro .uk-overlay-primary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(326deg, #80009F 0%, #643097 98%);
    opacity: 0.5;
}

There are other ways to get this result but I choose to use this approach to have minor changes on your code.

For better understanding, as mentioned in MDN web docs

opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another.

Yor
  • 182
  • 6
  • Hi Yor, thank you very much for having taken the time. I very much appreciate this solution as well as the links provided. Most excellent, thank you so much! – The Dude man Sep 05 '19 at 03:42
0

Answer is simple. You need to use the background opacity rather than style opacity. Change the following css and it should work fine :)

.intro .uk-overlay-primary 
{
    background-image: linear-gradient(326deg, #80009F50 0%, #64309750 98%);
}
Prajyot Tote
  • 670
  • 5
  • 12