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

Question

我需要为文本添加背景图片。我怀疑这可能是因为我们在“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>

Answer 1

为您的 smalltitle2 容器添加一个宽度和高度，您可以调整它的外观是否应该成为图像的一部分，或者您是否希望整个图像都在容器内(使用 背景大小).

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