Quiero cambiar la opacidad de la imagen de fondo. Puedo hacer esto usando HTML simple y CSS. Aquí hay un ejemplo de marcado html y css.
<div class="demo-wrap"> <div class="demo-content"> <h1>Hello World!</h1> </div> </div>Aquí está el CSS
.demo-wrap { position: relative; } .demo-wrap:before { content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.6; background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png'); background-repeat: no-repeat; background-position: 50% 0; background-size: cover; } .demo-content { position: relative; }Quiero cambiar la opacidad de la imagen de fondo usando Material UI. Para ello he utilizado el gancho makeStyles del material Ui. Hice customStye y lo usé en className. Aquí está mi código.
import React from 'react'; import {Box,Typography } from '@mui/material'; import { makeStyles } from '@material-ui/core/styles'; const CategoryCard = ({ image }) => { const useStyles = makeStyles({ demowrap:{ position:'relative' }, '&::before':{ content: '"', display: 'block', position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', opacity: 0.6, backgroundImage: `url(${image})`, backgroundRepeat: 'no-repeat', backgroundPosition: '50% 0', backgroundSize: 'cover' }, demoContent:{ position:'relative' } }) const classes = useStyles() return ( <Box component="div" className={classes.demowrap}> <Box component="div" className={classes.demoContent} > <Typography component="p">Hello</Typography> </Box> </Box> ); }; export default CategoryCard;Pero no estoy obteniendo el resultado deseado. La imagen no se muestra en la interfaz de usuario. Cualquier ayuda es apreciable. Gracias.
Debe colocar la imagen de fondo en un pseudoelemento del padre
.demo-wrap::before { content: ""; background-image: url('https://placekitten.com/1200/800'); background-size: cover; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.75; } y dale al elemento en sí mismo una posición relative y alto y ancho de acuerdo con esto:
.demo-wrap { position: relative; height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center;}
También puede agregar una superposición con opacidad reducida y color de fondo encima de la imagen de fondo.
.demo-wrap::before { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(0,0,0,0.25);}
Puedes probar con esto. Creo que eso será trabajo.
const useStyles = makeStyles({ demowrap:{ position:'relative', '&:before':{ content: '""', display: 'block', position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', opacity: 0.6, backgroundImage: `url(${image})`, backgroundRepeat: 'no-repeat', backgroundPosition: '50% 0', backgroundSize: 'cover' } }, demoContent:{ position:'relative' } })Puedes usar un método CSS normal llamado filter() como ese
filtro: opacidad (50% "cualquier valor que necesite");
Leer más https://developer.mozilla.org/en-US/docs/Web/CSS/filter