我正在嘗試添加背景圖片到我的vue.js項目

Question

我想添加一個覆蓋整個頁面的背景圖片。然而，這是現在的樣子：

我希望它橫跨整個網頁。這將如何在vue.js中完成？

我也想要一個動畫工具欄，以便當頁面不滾動時，工具欄是透明的，並且看起來像背景圖像。當滾動工具欄將有目前的藍色

這裏是我的小提琴

vue.js project

這是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中，並且在某種程度上具有獨立存在性。所以，如果你想爲身體的完整背景圖片，不只是爲它內部的一個特定組成部分，你有兩個主要選擇：

1. 創建靜態樣式表
2. 把你的風格規則App.vue

---

靜態樣式表

創建style.css文件，並把它放在static文件夾中。在這裏，它不會被Webpack處理。在這個文件中，你可以有以下代碼：

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

打開index.html，包括你的樣式表：在App.vue

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

樣式規則有了這個解決方案，您可以把下面的代碼在App.vue的樣式部分：

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

但是，您必須刪除scoped屬性！

的解釋是在vue-loader documentation：

當標籤具有範圍的屬性，它的CSS將只適用於當前組件的元素。