Question

尝试将图像作为一段代码的背景。尝试过内联的html属性样式和css样式，但都没有效果。甚至尝试将它优先于！important，但结果相同。选择器肯定是针对元素所以导致问题的原因以及如何修复它？

#intro {
  width: 100%;
  height: 100vh;
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

<section id="intro">
  <div class="intro-text">
    <h2></h2>
    <p></p>
  </div>
  <div class="product">
  </div>
</section>

Answer 1

它适用于真实图像 - 见下文。唯一需要注意的是：图像上方的空白区域是h2的默认边距，它延伸到剖面上方（“折叠边距”）。如果您想避免这种情况，请添加

#intro h2:first--of-type { 
  margin-top: 0; 
}

html,
body {
  margin: 0;
}

#intro {
  width: 100%;
  height: 100vh;
  background-image: url("http://placehold.it/500x350/fa0");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

<section id="intro">
  <div class="intro-text">
    <h2></h2>
    <p></p>
  </div>
  <div class="product">
  </div>
</section>

如何将图像作为部分的背景

1 个答案: