使離子離子項具有透明背景

有沒有辦法使離子背景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

使離子離子項具有透明背景

回答

相關問題