【问题标题】:How do I make this section background responsive?如何使此部分背景响应?
【发布时间】:2019-03-03 16:58:09
【问题描述】:

我正在尝试使我的<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>

【问题讨论】:

  • 删除 CSS 中 .section 中的 .,您需要引用该元素而不是名为 section 的 CSS 类
  • @Lawless 已经删除了,谢谢

标签: javascript html css background responsive


【解决方案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>

【讨论】:

  • 明白你的意思,但我仍然得到相同的结果,当我更改浏览器大小时图像不会调整大小
  • 我在这里找到了:jsfiddle.net/xaqL9wos,我不明白你说的 image wont resize 是什么意思
  • 你的意思是响应式图片。如果是这样,请查看如何使用 CSS 创建响应式图像:w3schools.com/howto/howto_css_image_responsive.asp
猜你喜欢
  • 1970-01-01
  • 2016-12-16
  • 1970-01-01
  • 1970-01-01
  • 2022-12-10
  • 1970-01-01
  • 1970-01-01
  • 2016-05-17
  • 2021-03-30
相关资源
最近更新 更多