Mobile app version of vmapp.org
Login or Join
Ann6370331

: Photoshop To CSS: How do you translate Fill to CSS I have a content box in photoshop with the background color #bc0018 with a 65% opacity and 50% fill. I am able to translate the backgroundcolor

@Ann6370331

Posted in: #AdobePhotoshop #Css

I have a content box in photoshop with the background color #bc0018 with a 65% opacity and 50% fill.

I am able to translate the backgroundcolor and opacity part to this, but without the 50% fill the backgroundcolor looks different.

.content-box {
background-color: rgba(188, 0, 24, 0.65); }


Any suggestions on also getting the proper "fill" in CSS?

EDIT

I did just divide the opacity by half and it appears to achieve the same effect as a 50% fill. Still, I would love to hear how other people do this? I definitely don't want to create an image just for this.

.content-box {
background-color: rgba(188, 0, 24, 0.325); }


Thanks!

10.02% popularity Vote Up Vote Down

Login to follow query

More posts by @Ann6370331

Login to post a comment!

2 Comments

Sorted by latest first Latest Oldest Best

 

@Chiappetta793

rgba seems to be nothing more than regular rgb values


{ background-color:rgba(154,201,40,0.5); }


with the additional alpha/opacity value


{ background-color:rgba(154,201,40,0.5); }


So just paste the full opacity color values in the first three boxes (rgb), and set opacity for it in the last value e.g. 0.5 is 50% transparency...

10% popularity Vote Up Vote Down

 

@Kaufman565

Multiply the opacity and fill opacity fractions, and you get the final opacity value. In your case this would be 0.65*0.5 = 0.325. So you're right that halving the opacity in this case works.

However, there are certain pitfalls that make a straightforward conversion from photoshop to CSS difficult. Fill opacity in PS will not affect drop shadows and such, but CSS opacity will also affect any analogous box-shadows you apply.

10% popularity Vote Up Vote Down

Back to top | Use Dark Theme