Question

我需要将背景图像放到文本中。我怀疑这可能是因为我们在＆＃34; div＆＃34;中嵌套了太多的类。但仍然无法弄明白。

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

您可以尝试background-size: contain;或background-size: cover;等。

CSS没有问题，它只是缺少定义背景图像大小的规则。

在此处查看演示：https://jsfiddle.net/v8eLsef4/1/

Answer 2

为smalltitle2容器添加宽度和高度，你可以调整你想要的样子，看它是否应该是图像的一部分，或者你想要整个图像在容器内（使用{{1 }}）。

＆＃13;

background-size

＆＃13;

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

＆＃13;

在flex容器中的CSS背景图像

2 个答案: