【问题标题】:Change ion-view background color更改离子视图背景颜色
【发布时间】:2017-01-28 22:17:31
【问题描述】:

我正在使用 ionic,我使用 ion-view 创建了我的主标题

<ion-view title="test" class="frame_look_feel"> <ion-nav-buttons
    side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons> <ion-content class="has-header">
<h1>Search</h1>
</ion-content> </ion-view>

我正在尝试使用 css 更改标题的颜色,并且它一直是灰色的。正确的做法是什么?

【问题讨论】:

    标签: javascript css ionic-framework


    【解决方案1】:

    您只需在 CSS 中添加以下行:

    .pane {
        background-color: #000;
    }
    

    让我知道它是否适合你。

    【讨论】:

    • 你能给出一些代码吗?还要确保您的 CSS 文件是在 ionic CSS 文件之后导入的。 &lt;link type="text/css" rel="stylesheet" href="styles/ionic.css"&gt; &lt;link type="text/css" rel="stylesheet" href="styles/main.css"&gt;
    【解决方案2】:

    使用!importantpane css 类覆盖离子默认背景颜色,

       .pane {
            background-color: #464646!important;
        }
    

    并用于更改字体颜色:

    .bar.bar-stable .title{
        color:#FFF!important;
    }
    

    【讨论】:

      【解决方案3】:

      您的解决方案是:

      .frame_look_feel {
          background-color: #FD3583;
      }
      

      在 ionic.css 之后添加你的 style.css

      【讨论】:

        【解决方案4】:

        问题在于 css 的特殊性。你的 CSS 规则

        .frame_look_feel {
            background-color: #FFFFFFF;
        }
        

        这条规则的特异性为 10。离子规则通常具有更高的特异性。这就是为什么不应用您的样式的原因。查看Specificity 了解更多详情。 尝试类似

        .frame_look_feel.custom_color {
            background-color: #FFFFFF;
        }
        

        【讨论】:

          【解决方案5】:

          如果您只想更改文本颜色:

          .frame_look_feel {
          color: red;
          }

          别人说的背景

          .frame_look_feel {
          background-color: red;
          }
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2018-06-11
            • 2022-01-25
            • 2020-01-20
            • 1970-01-01
            • 2020-05-03
            • 2014-10-21
            • 2017-09-25
            • 2013-11-18
            相关资源
            最近更新 更多