Question

我有以下CSS代码：

.hero {
    position: relative;
    padding: 60px 0 60px 0;
    min-height: 900px;

    background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
    background-size: cover;
    color: #fff;
}

这使得覆盖宽度为100％，但高度仅为900px。我尝试添加height: 100%，但这不起作用。到目前为止，网页看起来像http://i.imgur.com/RMyIO4Y.jpg，当用户将浏览器调整为全屏时，我想让视频部分不可见。我怎样才能做到这一点？感谢。

Answer 1

您还可以将高度设置为

height: 100vh;

http://caniuse.com/#feat=viewport-units

Hero模板的示例css：

.hero {
  position: relative;
  padding: 60px 0 60px 0;
  min-height: 100vh;
  background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
  background-size: cover;
  color: #fff;
}

Answer 2

使用此：

background-size: 100% 100%

这应该将它拉伸到X和Y的100％。

Answer 3

你能在这里发一个小提琴吗？我还需要检查HTML。而且......关于第二部分，你可以通过媒体查询轻松完成。

想象视频部分的div有一个＆＃39;视频部分＆＃39;，您可以这样做：

@media (max-width: 600px) { 

    .video-section {
         display: none;
  }

}

如何在css中为完整尺寸页面修复我的网页背景封面？

3 个答案: