React中背景图像为何不全宽

Question

问题详细信息：

我试图在react中设置背景图像，但定位无法正常工作。图像被放大了很多，而且当我将背景大小的属性从封面更改为包含时，它会挤压到中心，而不是占据容器的整个宽度。

反应组件

import React from 'react'
import arrow from '../images/icon-arrow-down.svg'
function Showcase() {
return (
<div>
<section className="showcase">
<div className="overlay">
<h1>We are creative</h1>
<img src={arrow} alt="" />
</div>
</section>
</div>
)
}
export default Showcase;

----------

CSS代码

**<!-- language: lang-css -->**
/*ShowCase*/
.showcase{
background-image: url('./images/mobile/image-header.jpg');
height:100vh;
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
background-size:  100%
}
.showcase .overlay{
height:512px;
display:flex;
align-items: center;
justify-content: center;
}
<!-- end snippet -->

输出的预览是[1] ：https://i.stack.imgur.com/M1NRu.jpg

Answer 1

尝试从.showcase中删除background-size: 100%。

这应该确保图像的大小可以大于容器，因此background-position: cover可以是其尺寸的全高和全宽。

*编辑(展示的完整样式)：

.showcase{
background-image: url('./images/mobile/image-header.jpg');
height:100vh;
width: 100vw;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}