静态样式表

Question

我想添加一个覆盖整个页面的背景图片。不过这就是它现在的样子：

我希望它跨越整个网页。如何在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，并在某种程度上具有独立存在性。因此，如果您想为主体设置完整的背景图像，而不仅仅是为其中的特定组件设置，您有两个主要选项：

创建静态样式表
将您的样式规则放在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 documentation：

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

我正在尝试将背景图像添加到我的vue.js项目中

1 个答案:

静态样式表

`App.vue`