更改 CSS 中 Ionic 离子项的背景颜色 [英] Changing background color of Ionic ion-item in CSS

问题描述

我添加了以下代码 style="background-color: #C2A5A5 !important.但这对我不起作用.如何为 ion-item 添加背景颜色?提前致谢.

<ion-item class="item-remove-animate item-avatar item-icon-right" style="background-color: #C2A5A5 !important" ng-repeat="detail in details" type="item-text-wrap" ng-controller="ChatsCtrl" ng-click="openShareModel(detail)"><img ng-src="{{profilepic.profileimageurl}}"><h2>{{detail.date |日期 :'fullDate'}}<h2>{{detail.title}}</h2><p>{{detail.description}}</p><i class="icon ion-chevron-right icon-accessory"></i><ion-option-button class="button-assertive" ng-controller="ChatsCtrl" ng-click="remove(detail.id)">删除</ion-option-button></ion-item>

解决方案

Ionic 正在向 内注入一个元素，赋予该元素一个结构:

<div class="item-content">

</ion-item>

Ionic CSS 包含一个 CSS 属性:

.item-content {背景色:#ffffff;}

您添加的内联 CSS 将应用于具有 #ffffff 背景的元素后面的元素，因此您看不到背景颜色.

将背景颜色应用到 .item-content 元素，如@ariestiyansyah 推荐的那样，通过将以下 CSS 添加到 Ionic CSS 文件，或创建自定义 CSS 文件并包含 <link> 在标题中指向它，并使用以下内容:

.item .item-content {背景颜色:透明！重要；}

这是工作演示.

I have added the following code style="background-color: #C2A5A5 !important. But that has not worked for me. how can I add background color to ion-item?Thanks in advance.

<ion-item class="item-remove-animate item-avatar item-icon-right" style="background-color: #C2A5A5 !important" ng-repeat="detail in details" type="item-text-wrap" ng-controller="ChatsCtrl"  ng-click="openShareModel(detail)">
    <img ng-src="{{profilepic.profileimageurl}}">

    <h2>{{detail.date | date :'fullDate'}}</h2>
    <h2>{{detail.title}}</h2>
    <p>{{detail.description}}</p>
    <i class="icon ion-chevron-right icon-accessory"></i>

    <ion-option-button class="button-assertive" ng-controller="ChatsCtrl" ng-click="remove(detail.id)">
      Delete
    </ion-option-button>

  </ion-item>

解决方案

Ionic is injecting an element inside the <ion-item> giving the element a structure of:

<ion-item>
  <div class="item-content">
  </div>
</ion-item>

The Ionic CSS contains a CSS property:

.item-content {
  background-color:#ffffff;
}

The inline CSS you added is being applied to the element behind the element with the #ffffff background, so you can't see your background color.

Apply the background color to the .item-content element, as @ariestiyansyah recommended by adding the following CSS to the Ionic CSS file, or create a custom CSS file and include a <link> to it in the header, with the following:

.item .item-content {
  background-color: transparent !important;
}

Here's the working demo.

这篇关于更改 CSS 中 Ionic 离子项的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！