为什么即使尝试了-webkit-linear-gradient,我的重复线性渐变也无法在Safari中工作?它在Chrome中完美运行

问题描述

请参阅此密码笔。甚至codepen代码也无法在Safari中使用,但可以在Chrome中使用。

https://codepen.io/srbsingh3/pen/bGpgQoY

div {

height: 400px;
margin-left: 200px;
background: repeating-linear-gradient(to bottom,rgba(255,255,0.15) 0 3px,transparent 3px 8px) 0/1px no-repeat,linear-gradient(to bottom,#74ddb1 0 19px,transparent 19px 133px,#74ddb1 133px 152px,transparent 152px 100%) 0/1px no-repeat;

}

解决方法

您使用rgb,但为rgba传递参数;您将背景尺寸设置为1px,因此很小。

指定rgba并使用位置和大小进行播放,可以使笔的背景在iOS的Safari中可见。