Question

如果这里有一些优秀的前端设计师，我需要帮助！我实际上正在处理着陆页项目并尝试新的东西，但我实际上面临的情况是：

当我减少屏幕时，我的背景颜色不适合。例如，当它全屏显示时，一切都很好： enter image description here

然后，如果我缩小，我的背景色全部搞砸了，我的图像也一样： enter image description here

我正在使用Boostrap 4封面示例代码。这是我的主要应用程序html：

body {
  background-image: linear-gradient(to bottom, rgba(0,101,168,0.6) 0%, rgba(0,36,61,0.6) 50%), url('profile-pictures/palmtree-cover.jpg');
  height:100vh;
  width:auto;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .2);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
.cover-container {
  max-width: 90%;
}
/*
 * Header
 */
 .masthead {
  margin-bottom: 2rem;
}
.masthead-brand {
  margin-bottom: 0;
}
.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}
.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}
@media (min-width: 48em) {
  .masthead-brand {
    float: left;
  }
  .nav-masthead {
    float: right;
  }
}
/*
 * Cover
 */
 .cover {
  padding: 0 1.5rem;
}
.cover .btn-lg {
  padding: .75rem 1.25rem;
  font-weight: 700;
}
/*
 * Footer
 */
 .mastfoot {
  color: rgba(255, 255, 255, .5);
}
.inner {
  text-align: center
}
/*
*Custom styles
*/

我的CSS（相关部分：

checked status

我没有触及引导课程，我可能已经清理了一点但是这一切。我不明白这种行为，我只希望我的背景颜色/图像/渐变是相同的，完全响应。另外我确切地说，当我检查时，我看不出是什么类负责这个！

Answer 1

尝试使用：background-size: cover;作为图像周围空间的分辨率。

屏幕变得可滚动时奇怪的css行为

1 个答案: