私はvue.jsプロジェクトに背景イメージを追加しようとしています

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; 
} 

である

vue.js project

ですこれはバックグラウンドをレンダリングするための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.js devtoolsを開くと :)

...あなたは、単一のファイルのコンポーネントを使用しているので、私はあなたがVUE-CLIとのWebPACKテンプレートを使用してプロジェクトを作成したと仮定し、あなたが調べることができますコンポーネント。これは、視覚的な限界を判断するのに特に便利です。

App.vueを含むすべてのコンポーネントが、index.htmlに注入され、ある程度まで独立した存在を持ちます。

1. がApp.vue
であなたのスタイルルールを入れて、静的スタイルシート
2. を作成します：あなたが身体を完全に背景画像を設定したいのであれば、だけではなく、その中の特定のコンポーネントのために、あなたは、主に2つのオプションがあります

---

静的スタイルシート

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だけで現在のコンポーネントの要素に適用されます。