如何为 Onsen UI 页面设置背景颜色答案

【问题标题】：How to set background color to Onsen UI page如何为 Onsen UI 页面设置背景颜色
【发布时间】：2014-05-30 20:00:23
【问题描述】：

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

【问题讨论】：

标签： html css user-interface styles onsen-ui

【解决方案1】：

你可以试试

html

  <ons-page class="red">

    <h1>Page 1</h1>

  </ons-page>

css

 .red {
    background-color: red;
 }

这里是笨蛋。 http://plnkr.co/edit/jWTrYz?p=preview

【讨论】：

但是当我将 ons-page 放入 ons-navigator 时，它没有用。！
当我添加了一些温泉元素时，背景将恢复为默认值
我看到设置页面背景颜色的唯一方法是在 .page 中覆盖未发送的 css 文件

【解决方案2】：

对于 v2，让我引用在 Gitter 上提供此信息的 @frandiox：

在您的v-ons-page 中提供一个<div class="background"></div> 元素，该元素将用作背景。您可以根据需要设置样式。更多信息在这里：https://onsen.io/v2/guide/compilation.html#page-compilation

【讨论】：

【解决方案3】：

试试这个，Javascript：

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

温泉标签：

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

【讨论】：

也许你能解释一下为什么这会起作用？这可能会让你的答案更清楚。

【解决方案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>

【讨论】：

【解决方案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 应该有助于设置页面背景的样式

【讨论】：