我正在尝试向我的 vue.js 项目添加背景图片

Question

我想添加一个覆盖整个页面的背景图像。然而这是它现在的样子：

我希望它跨越整个网页。这将如何在 vue.js 中完成？

我还想要一个动画工具栏，以便当页面不滚动时，工具栏是透明的，并具有背景图像的外观。当它滚动时，工具栏将具有当前的蓝色

这是我的小提琴

Vue.js 项目

这是 HTML

<template>
  <div id = "background">

            <div class = "" id = "explain">

                   <h1 class = "md-title">{{ message }}</h1>

                   <h3> Collect, analyse  and do better with data!</h3>

            </div>
<hr>
<md-layout id = "container">

            <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">

    <span class="md-headline">HOW does levi function ?</span>
            </md-layout>


<md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
  <h3>levi uses research and experimentation to provide
  'actionable knowledge' that you can use to <b>do well </b>in your environment. </h3>
</md-layout>

                  <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large = "33" md-flex-xlarge = "33">
                    <h4>  Identify and Collect what is needed</h4>
                  </md-layout>
                  <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large = "33" md-flex-xlarge = "33">
                      <h4> Organize and analyse the evidence</h4>
                  </md-layout>
                  <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large = "33" md-flex-xlarge = "33">
                      <h4>Communicate and act on the evidence! </h4>
                  </md-layout>


</md-layout>



<md-layout id = "Identity">

      <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
      <span class="md-headline"> HOW do we exist?</span>
      </md-layout>

      <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
          Our team realized that many institutions are unable to deconstruct their environment and respond to its need because; they do not have the
cost effective products, proper processes , and the necessary execution techniques required to do so.
<p>levi has been built to provide the platform and process necessary to help those in need <b>do well.</b></p>
      </md-layout>



           <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
              <span class="md-headline">WHAT do we do?</span>
          </md-layout>

          <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
            Our community combines products and processes to augment human intelligence, reduce waste, and provide wellbeing.
         </md-layout>

         <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
        <span class="md-headline"></span>
        </md-layout>

        <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">

       </md-layout>

</md-layout>

  </div>

</template>

这是 CSS

<style scoped>

h1 {
  font-family: Helvetica neue;
  text-align: center;
  font-weight: 400;
  font-size: 49px;
  line-height: 1.1em;
  font-family: Heiti SC;
}

h2 {
  font-family: Helvetica neue;
  text-align: center;
  font-weight: 600;
  font-size: 19px;
}

h3 {
  font-family: Helvetica neue;
  text-align: center;
  font-weight: 300;
  font-size: 19px;
}

h4 {
  font-family: Helvetica neue;
  text-align: center;
  font-weight: 300;
  font-size: 19px;
}

#Identity > .md-layout {
  /*background-color: lightgrey;*/
  border-color: black;
  align-items: center;
  justify-content: center;
  /*border-style: dotted;*/
  border-width: 1px;
  padding: 8px;
  font-weight: 200;
  font-size: 20px;
  line-height: 1.4em;
}

span {
  font-family: Helvetica neue;
}

这是用于渲染背景的 css 语法。

 #background {
      background: url(../../assets/whiteCoffeedarken.jpg);
    }

#container > .md-layout {
  /*background-color: lightgrey;*/
  border-color: black;
  align-items: center;
  justify-content: center;
  /*border-style: dotted;*/
  border-width: 1px;
  padding: 8px;
}


</style>

Answer 1

我不同意这些评论。这实际上是一个关于 Vue.js 的真实问题。:)

您使用的是单文件组件，所以我想您使用vue-cli和webpack模板创建了您的项目...

如果你打开你的Vue.js devtools，你可以检查你的组件。这对于确定它们的视觉限制特别方便。

所有的组件，包括App.vue，都被注入到你的index.html，在某种程度上，是独立存在的。因此，如果您想为 body 设置完整的背景图像，而不仅仅是为其中的特定组件设置，您有两个主要选项：

1. 创建静态样式表
2. 把你的风格规则放进去 App.vue

静态样式表

创建一个style.css文件并将其放入static文件夹中。在这里，它不会被 Webpack 处理。在这个文件中，你可以有以下代码：

body {
  background-image: url('background.jpg');
}

打开index.html并包含您的样式表：

<link rel="stylesheet" href="/static/style.css">

样式规则 App.vue

使用此解决方案，您可以将以下代码放在 的样式部分App.vue：

body {
  background-image: url('background.jpg');
}

但是，您必须删除该scoped属性！

解释在vue-loader 文档中：

当标签具有 scoped 属性时，其 CSS 将仅应用于当前组件的元素。