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.

  • So...you basically need to open the image in a software and change the RGB values (color balance) and the opacity to 70% + save as png? – Alin Oct 30 '16 at 16:00
  • 2
    The image needs to be set to 70% opacity and then overlayed on top of rgb(63, 70, 108). I don't think color balance can do this. – gaefan Oct 30 '16 at 16:07
  • use imagemagick – joojaa Oct 30 '16 at 16:17

I was able to do this using Gimp on Mac:

  1. Loaded my image into a first layer and set opacity t0 30%.
  2. Added a second layer with the desired background color.
  3. Export to jpg.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.