关于CSS：MaterialUI Box接管背景图片

MaterialUI Box takes over background image

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

1
2
3
4
5
6
7

此组件，称为Form，然后按如下方式在App.js中传递：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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 (

<Form />

);
};
export default App;

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

enter Box，并且背景图像将正常显示。

我该如何实现？

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

div的默认行为是在可用空间中水平拉伸。这就是为什么Box会水平拉伸的原因。 div元素的默认大小在哪里定义或计算？

您要在Box上使用的minHeight：" 100vh"样式告诉它要在可用的垂直空间上伸展。这就是为什么Box垂直拉伸的原因。
请参见"视口单元的娱乐性"

也许将Grid组件用作package器会为您提供所需的内容

1
2
3
4
5
6
7
8
9

这会将您的代码更改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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;

我建议您使用pseudo元素，例如:after和:before

这里是一个例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

1	<span>Hello World I am text with background blur</span>

Do what ever you want to apply to ::after wont effect the form above