如何在iOS Safari上设置渐变背景透明度? [英] How to set gradient background transparency on iOS Safari?

问题描述

以下CSS在Safari上不起作用(在iPad iOS上进行了测试):

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?

编辑-解决方案:

使用rgba CSS颜色值:

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

推荐答案

使用rgba而不是透明的.

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

这篇关于如何在iOS Safari上设置渐变背景透明度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！