如何在 iOS Safari 上设置渐变背景透明度?
How to set gradient background transparency on iOS Safari?
以下 CSS 在 Safari 上不起作用(在 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 );
}
关于保持透明度的解决方法有什么想法吗?
编辑 - 解决方案:
使用 rgba CSS 颜色值:
.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 而不是透明。
.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 );
}
以下 CSS 在 Safari 上不起作用(在 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 );
}
关于保持透明度的解决方法有什么想法吗?
编辑 - 解决方案:
使用 rgba CSS 颜色值:
.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 而不是透明。
.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 );
}