5

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

这是图像

我希望它跨越整个网页。这将如何在 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>
4

1 回答 1

7

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

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

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

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

  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 将仅适用于当前组件的元素。

于 2017-08-08T17:25:27.903 回答