时间戳

首页 > 解决方案 > 为什么图像没有出现在反应中？

html - 为什么图像没有出现在反应中？

问题描述

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

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

标签： htmlcssreactjstwitter-bootstrap

解决方案

首先试试这个，看看 url 是否损坏以及选择器是否正确。

.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-repeat: no-repeat;
    background-color: #cccccc;
}

另外，尝试使用 container-fluid 作为选择器

.container-fluid {
    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-repeat: no-repeat;
    background-color: #cccccc;
}

资源：

W3学校

推荐阅读