html – 改变CSS中离子项目的背景颜色

发布时间：2020-12-14 18:46:46 所属栏目：资源来源：网络整理

导读：我添加了以下代码style =“background-color：#C2A5A5

我添加了以下代码style =“background-color：#C2A5A5！”,但这对我来说没有效果,我如何添加背景颜色到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 | 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>内注入元素给元素一个结构：

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

Ionic CSS包含CSS属性：

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

您添加的内联CSS正在应用于#ffffff背景元素后面的元素,因此您看不到背景颜色.

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

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

这是working demo.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!