简体   繁体   中英

How to set gradient background transparency on iOS Safari?

The following CSS doesn`t function on Safari (tested on iPad iOS):

.map-left-navi {
    background: #ffffff;
    background: -moz-linear-gradient(left, #ffffff 35%, transparent 100%);
    background: -webkit-linear-gradient(left, #ffffff 35%,transparent 100%);
    background: linear-gradient(to right, #ffffff 35%,transparent 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='transparent',GradientType=1 );
}

Any idea on a workaround to keep the transparency?

Edit - Solution:

Use rgba CSS color values:

.map-left-navi {
    background: #ffffff;
    background: -moz-linear-gradient(left, rgba(255,255,255, 0.35), rgba(255,255,255, 0));
    background: -webkit-linear-gradient(left, rgba(255,255,255, 0.35), rgba(255,255,255, 0));
    background: linear-gradient(to right, rgba(255,255,255, 0.35), rgba(255,255,255, 0));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='transparent',GradientType=1 );
}

Use rgba instead of transparent.

.map-left-navi {
    background: #ffffff;
    background: -moz-linear-gradient(left, rgba(255,255,255, 0.35), rgba(255,255,255, 0));
    background: -webkit-linear-gradient(left, rgba(255,255,255, 0.35), rgba(255,255,255, 0));
    background: linear-gradient(to right, rgba(255,255,255, 0.35), rgba(255,255,255, 0));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='transparent',GradientType=1 );
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM