html - Flex容器中的CSS背景图片

我需要在文本上放置背景图片。我怀疑这可能是因为我们在“ div”中嵌套了太多的类，但仍然无法弄清楚。

CSS：

.box {
  display: flex;
  top: 80px;
  position: relative;
  padding-top: 30px;
  border-top: thin solid black;
  border-bottom: thin solid black;
  border-right: thin solid black;
  border-left: thin solid black;
}

.box1 {
  padding-left: 300px;
  padding-right: 30px;
  width: 630px;
  flex-direction: column;
  align-self: flex-start;
}

.smalltitle2 {
  border-bottom: medium solid black;
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-news-bite.png");
  background-repeat: no-repeat;
}

HTML：

<div class="box">
  <div class="box1">
    <div class="smalltitle2">Mother of Three Buys Tuna Steak at Phish Concert. Leaves, "Feeling Funny."</div>
  </div>
</div>

最佳答案

在您的smalltitle2容器中添加宽度和高度，然后可以调整外观，使其看起来应该是图像的一部分，还是要将整个图像包含在容器中（使用background-size）。

.box {
  display: flex;
  top: 80px;
  position: relative;
  padding-top: 30px;
  border-top: thin solid black;
  border-bottom: thin solid black;
  border-right: thin solid black;
  border-left: thin solid black;
}

.box1 {
  padding-left: 300px;
  padding-right: 30px;
  width: 630px;
  flex-direction: column;
  align-self: flex-start;
}

.smalltitle2 {
  border-bottom: medium solid black;
  background:url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-news-bite.png);
  background-repeat: no-repeat;
  background-size: contain;
  width:100%;
  height:100px;
}

<div class="box">
  <div class="box1">
    <div class="smalltitle2">Mother of Three Buys Tuna Steak at Phish Concert. Leaves, "Feeling Funny."</div>
  </div>
</div>