时间戳

首页 > 解决方案 > Nuxt.js 的背景图像没有响应

css - Nuxt.js 的背景图像没有响应

问题描述

我最近开始开发 Nuxt 应用程序，但它在很早的阶段就在 CSS 方面失败了。对于我的问题，在这个领域似乎非常重复，它是响应式背景。到目前为止，一切似乎都很好，除非在移动网络浏览器中打开。

我想将图像放在背景上，并且每个内容/vue 组件等都在它前面滑动。这是我到目前为止所尝试的：

我检查了 Chrome 网页（向上和向下一直延伸和拉伸，似乎是正确的），Chrome 开发者工具（各种移动响应能力也通过了，并且看到 bg-image 覆盖了整个屏幕）。但; 我在手机上打开了网站，并请我的一些朋友检查，所有发送相同的问题，它不是在手机上拉伸（覆盖）。

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

https://ibb.co/PD5Sfyc 这个用移动浏览器在 index.vue 的 1000px padding-top

https://ibb.co/PD5Sfyc 这个在 index.vue 有 1500px padding-top 但在 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>

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

标签： cssvue.jsbackground-imagenuxt.js

解决方案

我认为这不是 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; }orbody { height: 100%; }并设置你html { height: 100%; }的。（我不确定身体和头部是否必须是min-height: 100%;或height: 100%;。试试吧......

推荐阅读