更改离子视图背景颜色答案

【问题标题】：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 文件之后导入的。 <link type="text/css" rel="stylesheet" href="styles/ionic.css"> <link type="text/css" rel="stylesheet" href="styles/main.css">

【解决方案2】：

使用!important 的pane 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;
}

【讨论】：