离子卡背景透明白色答案

【问题标题】：ion-card background transparent white离子卡背景透明白色
【发布时间】：2019-01-24 13:35:56
【问题描述】：

我想留下一个离子卡，如图所示，背景透明但有点白，这样我仍然可以在背景中看到图像。有人可以帮助我如何做到这一点吗？

我正在寻找类似这张图片的效果：

我正在使用以下代码：

<ion-card class="cardconteudo">

    <ion-card-header>
     CARD HEADER
    </ion-card-header>

    <ion-card-content>
     CARD CONTENT
    </ion-card-content>

</ion-card>

SCSS：

.cardconteudo {     
    float: unset !important;       
}    
.contentclass {
    background-image: url('../../assets/imgs/mammajamma.png');
    background-repeat: no-repeat;
    background-size: 110%;
    background-position: 0% 14%;
}

【问题讨论】：

标签： html cordova ionic-framework ionic3

【解决方案1】：

尝试以下 SCSS：

.cardconteudo {
    background: rgba(255,255,255,0.5);
}

此解决方案利用了here 中解释的 rgba。以下语法：

rgba（红、绿、蓝、阿尔法）

其中 alpha 将不透明度定义为介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

所以我们使用白色背景（红色、绿色和蓝色设置为最大值）并将其设置为半透明（alpha = 0.5）。随意调整 alpha 值以获得您想要的效果。

【讨论】：

完美运行。非常感谢。