时间戳

首页 > 解决方案 > CSS Opacity atop Image Overlay

css - CSS Opacity atop Image Overlay

问题描述

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?

标签： cssuikit

解决方案

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.

推荐阅读