1

I am working on an image on the adobe photoshop. The opacity and fill value of it on the photoshop are 100%(opacity) and 57%(fill). I am wondering how can we convert these values in CSS ?

Improve this question
0

1 Answer 1

Reset to default
1

The only option you have is 57% opacity in CSS -- { opacity: 0.57; }.

There's no equivalent CSS property for fill opacity.

Unless you have Layer Styles applied to the layer in Photoshop, opacity and fill opacity will result in the same thing.

The only time they are different is with Layer Styles. Opacity will change everything on the layer including applied styles. Where as fill opacity will only change the layer pixel contents and not alter the applied Layer styles.

Per Joonas' comment: You could try specifying color in CSS via RGBA values { color: rgba(255,255,255,.5); } for 50% white text on an otherwise opaque element. That would allow an opacity setting on just the color, not the entire element.

Improve this answer
2
  • I guess if we rreeeaally wanted to compare these to something in css, it would be opacity = opacity and fill = rgba. If there's a div that contains text and image and you give it .5 opacity, everything inside will get translucent (the div included). If instead of opacity, you give the div background rgba color, such as: rgba(255,255,255,0.5), only the background is going to be translucent. But this is really here nor there as both can achieve the same thing. Also... has little to do with the question.
    – Joonas
    Commented May 17, 2017 at 5:25
  • Good point @Joonas I'm editing....
    – Scott
    Commented May 17, 2017 at 7:14

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