Clean Sky template – trying to replicate Hero transparent image effect


I'm trying to replicate the transparent colour effect used on the hero image in the Clean Sky template, but I can't figure out how this has been done. The background colour and transparency seem to be controlled by the font properties for this section, however, when I try to replicate these settings on another BSS project, the color and transparency settings are lost.

I know there are other ways to achieve this effect, but I'd like to understand how this works because it would be super-useful to use elsewhere.


It's because the hero image has a before pseudo class applied to it that uses the value currentColor.

.clean-block.clean-hero:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: currentColor; z-index: 1; }

It's kind of an odd way of doing this, but I guess the person who created the template had their reasons. You can read more about how this value works here:

Thanks for your reply Printninja. I'm using the templates to learn how stuff works but couldn't figure this one out. I'm gonna to look into currentColor some more. Cheers