optimize-css-assets-webpack-plugin icon indicating copy to clipboard operation
optimize-css-assets-webpack-plugin copied to clipboard

Published 20 hours ago • verified publisher icon NMFR

Bug: Opacity Reduces to 1% When Adding a Background Image with a defined Opacity

Open Jackmt9 opened this issue 4 years ago • 2 comments

React version: 16.13.1

Steps To Reproduce Set a css property background-image: url(...) Deploy the project (BUG ONLY VISIBLE ON PRODUCTION BUILD) Link to code example: https://github.com/Jackmt9/portfolio_site/tree/9f6b1f53f33f22386cf473bdc956774027059035 (See about and home page - there should be an image there.)

The current behavior Opacity of the image reduces to 1%

The expected behavior Opacity should be as defined, not 1%

##Workaround Set the opacity value as a decimal instead of a percentage (90% => 0.9)

Also see: https://github.com/facebook/react/issues/20569 https://github.com/facebook/create-react-app/issues/7980#issuecomment-559534896

Jackmt9 avatar Jan 11 '21 14:01 Jackmt9

To anyone else that hits this, you might be interested in a stylelint rule to prohibit percentage-based opacity:

https://stylelint.io/user-guide/rules/alpha-value-notation

jrr avatar May 20 '21 18:05 jrr

Hey guys, any news on this? I'm still facing this issue and I'm not really sure how to fix it.

rolandoff avatar Nov 17 '21 08:11 rolandoff