Material UI Box 接管背景图片答案

【问题标题】：MaterialUI Box takes over background imageMaterial UI Box 接管背景图片
【发布时间】：2019-12-27 12:46:18
【问题描述】：

我有一个包含表单的 react 组件，它的格式如下：

<Box
      display="flex"
      justifyContent="center"
      alignItems="center"
      style={{ minHeight: "100vh", backgroundColor: "gray", opacity: "0.8" }}
    > ...
</Box>

这个名为 Form 的组件随后在 App.js 中传递，如下所示：

import React from "react";
import Form from "./components/Form";

const sectionStyle = {
  height: "100vh",

  backgroundImage:
    "url('www.blablabla.com/img.jpg') ",

  backgroundRepeat: "no-repeat",
  backgroundSize: "cover"
};

const App = () => {
  return (
    <div style={sectionStyle}>
      <Form />
    </div>
  );
};
export default App;

但是，我得到的结果是这个：

我添加了不透明度以更好地显示我的Box 组件在整个窗口中“拉伸”，而我希望它只包裹其内容，这样如果应用了一些不透明度，它只会出现在我身边Box，背景图正常。

我怎样才能做到这一点？

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

material-ui Box 的默认组件是一个 div。见material-ui Box

div 的默认行为是在可用空间上水平拉伸。这就是您的 Box 水平拉伸的原因。 Where is the default size of a div element defined or calculated?

您应用于 Box 的 minHeight: "100vh" 样式告诉它在可用的垂直空间上伸展。这就是为什么您的 Box 垂直拉伸的原因。见Fun with Viewport Units

也许使用 Grid 组件作为包装器会给你想要的东西

   <Grid container className={props.classes.sectionStyle}
                          direction="column"
                          justify="space-evenly"
                          alignItems="center"
   >
       <Grid item>
           <Form />
       </Grid>
   </Grid>

这会将您的代码更改为：

import React from "react";
import {Grid} from '@material-ui/core';
import Form from "./components/Form";

const sectionStyle = {
  height: "100vh",

  backgroundImage:
    "url('www.blablabla.com/img.jpg') ",

  backgroundRepeat: "no-repeat",
  backgroundSize: "cover"
};

const App = () => {
  return (
    <Grid style={sectionStyle}
        container
        direction="column"
        justify="space-evenly"
        alignItems="center"
    >
      <Grid item>
        <Form />
      </Grid>
    </Grid>
  );
};
export default App;

【讨论】：

【解决方案2】：

我建议你使用pseudo elem like:after 和 :before

这是一个例子。

.background-filter::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: .8;
    background: red;
}

.background-filter {
  position: relative;
}

.background {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
  width: 200px;
  height: 200px;
}
.background span{
position: absolute;
    z-index: 1;
    }

&lt;div class="background background-filter"&gt;&lt;span&gt;Hello World I am text with background blur&lt;/span&gt;&lt;/div&gt;

你想申请::after 不会影响上面的表格

【讨论】：