Сделайте ионный ионный элемент прозрачным фоном

Question

Есть ли способ сделать фон ионного 2 <ion-item> прозрачным?

Я попробовал этот CSS, но это не делает элемент прозрачным:

.list .item, .item-content .item-inner .item-block .item-ios 
{ 
    background: transparent !important; 
} 

Добавлен код

Мой HTML выглядит следующим образом:

<ion-content class="pu-my-plans-background"> 
 

 
    <div *ngIf="hasPlans"> 
 
    <ion-list no-lines class="pu-item-list"> 
 
     <!--<ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)">--> 
 
     <ion-item-sliding *ngFor="let plan of plans; let i = index" > 
 
      <ion-item class="pu-section-list-item pu-my-plans-item" (click)="editPlan(plan.id, plan.rev, plan.title, i)"> 
 
      {{ plan.title }} 
 
      <br> 
 
      <span class="pu-my-plans-plan-date">{{ plan.updated}}</span> 
 
      <button *ngIf="plan.important" ion-button clear item-right> 
 
       <ion-icon name="ios-alert-outline"></ion-icon> 
 
      </button> 
 
      </ion-item> 
 
      <ion-item-options side="right"> 
 
      <button ion-button color="danger" (click)="deletePlan(plan.id, plan.rev)"> 
 
       <ion-icon name="delete"></ion-icon> 
 
       Delete 
 
      </button> 
 
      </ion-item-options> 
 
     </ion-item-sliding> 
 
     <!--</ion-item-group>--> 
 
    </ion-list> 
 
    </div> 
 

 
</ion-content>

И мой CSS, как это:

page-my-plans { 
 

 
} 
 

 
.pu-my-plans-plus-circle { 
 
    display: block; 
 
    //border: 2px solid white; 
 
    background-color: $pu-orange; 
 
    border-radius: 50%; 
 
    height: 38px; 
 
    width: 38px; 
 
} 
 

 
.pu-my-plans-plus-circle span { 
 
    font-size: 38px; 
 
    font-weight: 100; 
 
    color: white; 
 
    position: absolute; 
 
    top: -7px; 
 
    left: 8.5px; 
 
} 
 
.pu-plan-addButton { 
 
    font-size: 30px; 
 
    margin-right: 14px; 
 
    margin-top:-2px; 
 
} 
 

 

 
.pu-section-list-item{ 
 
    color: white; 
 
    background-color: black; 
 
    font-weight:$pu-item-font-weight; 
 
    font-size:$pu-item-font-size; 
 
    padding-left:20px; 
 
    padding-right:0px; 
 
} 
 
.item{ 
 
    background: transparent !important 
 
} 
 
// THEMING CSS 
 
// =========== 
 
// 
 
.pu-my-plans-background { 
 
    background-image: url("../assets/img/my_plan_bg@2x.png"); 
 
    background-size: cover !important; 
 
} 
 
.pu-my-plans-item { 
 
    border-style:solid; 
 
    border-bottom-width: 2px; 
 
    border-bottom-color: $pu-orange; 
 
} 
 
.pu-my-plans-plan-date { 
 
    color: $pu-orange; 
 
    font-size: 11px; 
 
    font-weight: 200; 
 
}

Я попробовал все комбинации укладки ионных 2 пунктов, как я могу думать, но лучшее, что я могу получить с этим, чтобы получить белый фон за ионным элементом. Содержание ионов имеет фоновое изображение, но я не могу увидеть это через ионный элемент.

Answer 1

Для ионного 2 элемента скольжения цвета фона вы можете изменить основную дерзость переменной

$item-ios-sliding-content-background(transprent); 
$item-md-sliding-content-background(transprent); 

В вашем Src -> теме -> variables.scss файл

вы можете найти все переменные here

Answer 2

Вы используете подвижный элемент. Попробуйте использовать приведенный ниже код

.pu-item-list ion-item-sliding{ 
    background: transparent !important; 
} 

Answer 3

для Android

.item-md { 
    background: transparent; 
} 

Для прошивки

.item-ios { 
    background: transparent; 
}