Putting a stylesheet-defined but user-selected color at a partial opacity over a user-uploaded background image

It’s pretty tricky, i think the key is i’m going to have to translate all the defined colors to RGB (i mean, it’s the same, but not hexadecimal i think).


(can also be done with box-shadow - https://stackoverflow.com/a/24084708/1028376 - but we don’t need it doing different stuff on hover or anything (although maybe we should) and we’re already using linear-gradient so i feel a bit more comfortable)

Something like:

card.is-cinnamon > .card-image {
  background: linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5) );

Actually, can’t do that, because there’s too much competition for the background property already (the background image is actually added as an inline style to accommodate user-uploaded images that, naturally, cannot be defined in stylesheets). So we go with the box-shadow approach:

card.is-cinnamon > .card-image { box-shadow: inset 0 0 0 100vmax rgba(219, 81, 42, .2); }