如何在材質ui中更改背景的影像不透明度？

我想改變背景影像的不透明度。我可以使用普通的 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 中。任何幫助都是可觀的。謝謝。

uj5u.com熱心網友回復：

您需要將背景影像放入父級的偽元素中

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

}

uj5u.com熱心網友回復：

你可以試試這個。我認為這會奏效。

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

uj5u.com熱心網友回復：

您可以像這樣使用稱為 filter() 的普通 CSS 方法

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

閱讀更多 https://developer.mozilla.org/en-US/docs/Web/CSS/filter

標籤：

上一篇：超出父容器范圍的影像

下一篇：如何使影像與其容器高度相同并具有視差效果？