如何為溫泉 UI 頁面設置背景顏色

Question

我想將溫泉 ui 頁面的背景顏色設置為藍色或某種顏色。 我已經嘗試在 onsen-page 中更新樣式，但似乎不起作用。

Answer 1

你可以試試

html

  <ons-page class="red">

    <h1>Page 1</h1>

  </ons-page>

css

 .red {
    background-color: red;
 }

這里是plunker。 http://plnkr.co/edit/jWTrYz?p=preview

Answer 2

對於 v2，讓我引用在 Gitter 上提供此信息的 @frandiox：

在您的v-ons-page提供一個<div class="background"></div>元素，它將用作背景。 您可以根據需要設置樣式。 更多信息在這里： https : //onsen.io/v2/guide/compilation.html#page-compilation

Answer 3

試試這個，Javascript：

document.addEventListener("init",function(event){
  if(event.target.id == "trn")
    {
      $("#trn .page__background").css("background","#ffffff");
    }
});

溫泉標簽：

<ons-page id="trn">
</ons-page>

Answer 4

對上述來自malu ugo的回答的解釋

ons-page 將按照以下方式編譯：它會自動添加 .page、div.page__background 和 div.page__content

<ons-page class="page">
  <ons-toolbar></ons-toolbar>
  <div class="page__background"></div>
  <div class="page__content">
    Some content here
    <ons-input></ons-input>
    <div>More content</div>
  </div>
  <ons-fab></ons-fab>
</ons-page>

使用javascript改變背景

Javascript：

document.addEventListener("init",function(event){
  if(event.target.id == "trn")
    {
      $("#trn .page__background").css("background","#ffffff");
    }
});

溫泉標簽：

<ons-page id="trn">
</ons-page>

Answer 5

<ons-template id="tab1.html">
    <ons-page id="first-page" >
        <div class="background"></div>
            <p style="text-align: center;">
                My Text
            </p>    
     <style>
       .background{
             background-color: black;
                 }
    </style>
  </ons-page> 
</ons-template>

添加類背景的 div 應該有助於設置背景樣式