Question

我最近开始开发Nuxt应用程序，但它在CSS阶段很早就失败了。对我来说，在这个领域似乎很重复的问题是响应式的背景。到目前为止，除非在移动Web浏览器中打开，否则一切似乎都还不错。

我想将图像放在背景上，每个内容/视频组件等都在其前面滑动。这是我到目前为止尝试过的：

我检查了Chrome网络（一直向上和向下延伸和拉伸，看起来似乎正确），Chrome开发者工具（各种移动响应能力也通过了，并且看到bg图像覆盖了整个屏幕）。但;我在手机上打开了网站，并要求我的一些朋友进行检查，所有这些都发送相同的问题，这不是在移动设备上伸展（覆盖）。

https://ibb.co/k129BrQ 这个通过移动浏览器在index.vue上没有填充

https://ibb.co/PD5Sfyc 这个通过移动浏览器在index.vue的顶部填充为1000px

https://ibb.co/PD5Sfyc 这款在index.vue具有1500px填充顶部的控件，但是在iPhone X设置中使用了chrome开发工具（也是我期望并希望看到的）

网站

-资产

--- css

---- main.css

body {
    background: url('../img/background.jpg') no-repeat fixed;
    background-position: center center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;   
}

---布局

---- default.vue

<template>
    <div>
        <nuxt />
    </div>

</template>

<script>
    export default {

    }
</script>

---页面

---- index.vue

<template>
  <div>
    <h1>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
  </div>
</template>

<script>
export default {
  layout: 'default'
}
</script>

我确实希望看到移动浏览器的所有屏幕都被图像覆盖，但是我意识到了这一点；它涵盖了应用程序创建的内容，如果内容无法到达屏幕末端，则不会按我的预期呈现。

Answer 1

我认为这不是nuxt的问题，而是您所说的，而是CSS问题。我认为由内容大小定义的容器还不够大，无法在屏幕上垂直延伸。因此，您可能需要应用一些额外的CSS来做到这一点：

.container-which-contains-bg {
  min-height: 100vh;
}

这能达到您想要的吗？

如果是这样，您必须注意vh在Safari iOS上造成一些麻烦。在那里，您可能不得不去min-height: 100%;并将所有包装器的高度都设置为100％。（例如body，head以及包裹图片容器div的其他内容）。

编辑：抱歉，您正在将样式应用于body。因此，您可以使用body { min-height: 100vh; }或body { height: 100%; }并同时设置html { height: 100%; }。（我不确定身体和头部是否必须为min-height: 100%;或height: 100%;。只需尝试一下...

Nuxt.js的背景图片没有响应

1 个答案: