使离子离子项具有透明背景

有没有办法使离子背景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/[email protected]"); 
 
    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项，因为我能想到的，但我可以用此得到最好的是获得一个白色背景上的每个组合在离子项目后面。离子含量具有图像背景，但我无法通过离子项目看到这一点。

来源

2017-01-27 Bill Noble

对于离子2项滑动背景颜色，您可以更改主SASS变量

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

在你的src - >主题 - > variables.scss文件

你可以找到所有的变量here

来源

2017-01-27 11:39:33

您正在使用滑动项目。尝试使用下面的代码

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

来源

2017-01-27 10:54:27 AishApp

这给了我一个白色背景。有一个背景图像，你不能看到你的CSS。我不知道如何创建一个离子切片2 –

atleast用你的html更新你的问题 – AishApp

如果你想重写离子2的风格，你可以避免！重要但包装你的sass在.md中，我已经添加了我的代码 –

对于Android的

.item-md { 
    background: transparent; 
}

对于iOS

.item-ios { 
    background: transparent; 
}

来源

2017-10-08 12:54:57 Marko

使离子离子项具有透明背景

回答

相关问题