In CSS, you can modify an image like this:
background: rgba(63, 70, 108, 0.7) url(/image.jpg) no-repeat;
I'd like to modify image.jpg to create image2.jpg so that it looks the same way as presented by the browser. I.e., I'd like to be able to do this:
background: url(/image2.jpg) no-repeat;
and have the same exact result as before.
The reason is that changing the opacity of the image in css causes other problems.
I'm on mac so would be great to have a mac specific solution.
I was able to do this using Gimp on Mac:
- Loaded my image into a first layer and set opacity t0 30%.
- Added a second layer with the desired background color.
- Export to jpg.