ditta
KPCKevin Powell - Community
•Created by ditta on 5/23/2024 in #front-end
"Add an overlay to a background-image with one line of CSS" - Border radius does not works
i figured out 🙂 instead of styling the class itself, I style the very first children:
.decor--overlay > * {
width: 100%;
height: 100%;
border-radius: inherit;
overflow: hidden;
border-image: var(--decor--overlay__image, linear-gradient( hsl( var(--clr1) / .5), hsl(var(--clr2) / .5))) fill 1; } with a variable, still able to customize the gradient (opacity, colour etc...)
border-image: var(--decor--overlay__image, linear-gradient( hsl( var(--clr1) / .5), hsl(var(--clr2) / .5))) fill 1; } with a variable, still able to customize the gradient (opacity, colour etc...)
8 replies
KPCKevin Powell - Community
•Created by ditta on 5/23/2024 in #front-end
"Add an overlay to a background-image with one line of CSS" - Border radius does not works
👍
8 replies
KPCKevin Powell - Community
•Created by ditta on 5/23/2024 in #front-end
"Add an overlay to a background-image with one line of CSS" - Border radius does not works
thank you! so I can stop think about it.
8 replies