如何更改材质 ui 中的背景图像不透明度？答案

【问题标题】：how can i change background's image opacity in material ui?如何更改材质 ui 中的背景图像不透明度？
【发布时间】：2022-01-11 04:11:08
【问题描述】：

我想改变背景图像的不透明度。我可以使用普通的 html 和 css 来做到这一点。这是一个示例 html 和 css 标记。

<div class="demo-wrap">
  <div class="demo-content">
    <h1>Hello World!</h1>
  </div>
</div>

这里是 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;
}

我想使用 Material UI 更改背景图像的不透明度。为此，我使用了材质 Ui 的 makeStyles 钩子。我已经制作了 customStye 并在 className 中使用了它。这是我的代码。

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;

但我没有得到想要的结果。图像未显示在 UI 中。任何帮助都是可观的。谢谢。

【问题讨论】：

标签： javascript css reactjs material-ui background-image

【解决方案1】：

需要将背景图片放入父级的伪元素中

.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;

} 并根据这个给元素本身一个位置relative 和高度和宽度：

.demo-wrap {
position: relative; 
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;

}

您还可以在背景图像顶部添加降低不透明度和背景颜色的叠加层。

.demo-wrap::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: rgba(0,0,0,0.25);

}

【讨论】：

我应该在 makeStyles 钩子中使用 .demo-wrap 吗？

【解决方案2】：

你可以试试这个。我认为这会奏效。

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'
        }
    })

【讨论】：

【解决方案3】：

您可以像这样使用称为 filter() 的普通 CSS 方法

filter: opacity(50% "任何你需要的值");

【讨论】：