I have been working on a front-end template using SCSS compiled with web pack. I managed to create a jumbotron with an image and added an overlay that displayed correctly initially. However, when I set the opacity of the overlay to 0.8, none of the elements (the image and the dark overlay) were visible in the browser.
It was all working fine until I changed it to RGBA and adjusted the opacity, after which nothing appeared on the screen.
Here's the SCSS code snippet:
.section {
// position: relative;
&-jumbotron {
height: 40rem;
background-image: linear-gradient(to right bottom, rgba(var(--color-grey-dark-1), 0.8), rgba(var(--color-grey-dark-5), 0.8)),
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}
The variables defined in the root file are:
:root {
--color-grey-dark-1: #333333;
--color-grey-dark-5: #222222;
}