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

问题描述

我添加了以下代码style="background-color: #C2A5A5 !important.但这对我没有用.我该如何为离子项目添加背景颜色?谢谢.

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正在在<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>

Ionic CSS包含CSS属性:

The Ionic CSS contains a CSS property:

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

您添加的内联CSS被应用到具有#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.

将背景颜色应用于.item-content元素，如@ariestiyansyah所建议的，方法是将以下CSS添加到Ionic CSS文件中，或者创建一个自定义CSS文件，并在标头中将<link>包括在其中，如下所示:

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;
}

这是工作演示.

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