Html 为什么图像没有出现在react中？

我试图在容器中添加图像作为背景，并在顶部添加文本。为什么图像没有出现？我做错了什么

<div className="container-fluid">
<div className="col-md-12 col-sm-12 col-xs-12 bgContainer matchingTalent">
                <div className="col-md-12 col-sm-12 col-xs-12 frContainer text-center">
                    <h2 className="col-md-12 col-sm-12 col-xs-12 text-center matchingTalentHeading">
                    Header Text
                    </h2>
                    <p className="col-md-12 text-center matchingTalentText">Test para text to add more in detail.</p>
                </div>
            </div>
</div>

**css**

.bgContainer {
  background-image: url("https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8YnVpbGRpbmd8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
 
  background-size: 100% 100%;
  height: 50vh;
  opacity: 0.6;
 
}
.frContainer {
  padding: 5.5em 3em;
}
.matchingTalentHeading,
.matchingTalentText {
  z-index: 5;
  color: black!important;
}

标题文本
测试段落文本以添加更多详细信息

**css**
.bg容器{
背景图像：url（“https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8YnVpbGRpbmd8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=格式&fit=裁剪&w=800&q=60“；
背景大小：100%100%；
高度：50vh；
不透明度：0.6；
}
.fr集装箱{
填充物：5.5em 3em；
}
.匹配标签，
.matchingTalentText{
z指数：5；
颜色：黑色！重要；
}

首先尝试此操作，查看url是否已损坏以及选择器是否正确

.bgContainer{
背景图像：url（“https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8YnVpbGRpbmd8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=格式&fit=裁剪&w=800&q=60“；
背景重复：无重复；
背景色：#中交；
}

另外，尝试使用容器流体作为选择器

。容器流体{
背景图像：url（“https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8YnVpbGRpbmd8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=格式&fit=裁剪&w=800&q=60“；
背景重复：无重复；
背景色：#中交；
}

资源：

---

您能显示问题的“反应”部分吗？谢谢您要求显示反应部分。我注意到了那里的问题并解决了它。谢谢解释一下为什么这会有帮助，会对未来的访问者有所帮助。