Material-UI: Text above background with opacity

user_15434382 0
Viewed 513

I want a background image with an opacity of 0.5, then have text on top with an opacity of 1 (no opacity). This way, the background is slightly blurred and the text is easier to read. Right now, the background image is not showing but the opacity is affecting the text.

Here is a demo: https://codesandbox.io/s/fervent-ramanujan-fw5f4

Any help is greatly appreciated.

material-ui reactjs css
1 Answers

If you want the opacity to only affect the image without also changing the text inside, you can use linear-gradient() function:

backgroundImage:
  'linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("image.jpg")',

Live Demo

Edit 66912021/material-ui-text-above-background-with-opacity

user_94494260
Related