Question

我正在尝试使<section>标签上的背景具有响应性，由于某些原因，当我更改浏览器大小时，背景将无法适应。我的代码有冲突吗？

@import url('https://fonts.googleapis.com/css?family=Questrial');
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@keyframes breath {
  0% {
    background-size: 100% auto;
  }
  50% {
    background-size: 140% auto;
  }
  100% {
    background-size: 100% auto;
  }
}

#bkg {
  width: 100%;
  height: 100%;
  animation: breath 100s linear infinite;
}

section {
  font-size: 35px;
  text-align: center;
  color: black;
  font-weight: ;
  font-family: 'Questrial', sans-serif;
}

hr {
  border-top: 1px solid black;
}

html,
body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

.section {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

<section style="background-image: url(img/bg.png); background-size: cover;"></section>

Answer 1

section标签不会受到.section的影响，而这个参考标签中的class="section"不是<section>，请检查下面的修订代码：

section {
  position: relative;
  background-size: cover;
  background-image: url('https://cdn.pixabay.com/photo/2018/01/24/18/05/background-3104413_960_720.jpg');
  background-repeat: no-repeat;
  font-size: 35px;
  text-align: center;
  color: black;
  font-family: 'Questrial', sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

<section>Lorem Ipsum</section>

如何使本节对背景作出响应？

1 个答案: