离子卡背景透明白

时间:2018-08-17 13:33:00

标签: html cordova ionic-framework ionic3

我要留下离子卡,如图像中那样,背景透明,但有点白,以便我仍然可以在背景中看到图像。有人可以帮我吗?

我正在寻找这样的效果:

image to demonstrate effect

我正在使用以下代码:

<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%;
}

1 个答案:

答案 0 :(得分:0)

尝试以下SCSS:

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

此解决方案利用了here中介绍的rgba。语法如下:

  

rgba(红色,绿色,蓝色,alpha)

其中alpha定义不透明度为0.0(完全透明)到1.0(完全不透明)之间的数字


因此,我们使用白色背景(将红色,绿色和蓝色设置为max)并将其设置为半透明(alpha = 0.5)。随时相应地调整Alpha值,以获得所需的效果。