如何设置Onsen UI页面的背景颜色

Question

我想将onsen ui页面的背景色设置为蓝色或某种颜色。我试过更新温泉页面的样式，但似乎不起作用。

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:上提供此信息的@frandios

在v-ons-page中提供一个<div class="background"></div>元素，该元素将用作背景。你可以随心所欲地设计它。更多信息请点击此处：https://onsen.io/v2/guide/compilation.html#page-汇编

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、div.page__background和div.page__内容

<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应该有助于设计页面的背景样式